2013-09-26 2 views
-1

다른 스크립트에 대한 ajax 요청을 실행하고 더 많은 버튼을 클릭 할 때마다 새 <li>을 추가하는 코드 스 니펫이 있습니다.동적으로 추가 된 요소에 .on을 적용

$(function(){ 
$('.more').on("click",function(){ 
    var ID = $(this).attr("id"); 
    if(ID){ 
     $("#more"+ID).html('<img src="moreajax.gif" />'); 

     $.ajax({ 
      type: "POST", 
      url: "/cs_directory/helpers/jpost_load_post.php", 
      data: "lastmsg="+ ID, 
      cache: false, 
      success: function(html){ 
       $("ul#existing_campaign").append(html); 
       $("#more"+ID).remove(); // removing old more button 

      } 
     }); 
    }else{ 
     $(".morebox").html('The End');// no results 
    } 

    return false; 
}); 
}); 

내가 내 URL의 반환과 함께 #more 버튼을 추가 해요 :

나는 다음과 같은 코드를 사용하고 있습니다.

이지만 문서가로드 된 후에 첨부되기 때문에 내 함수는 더 이상 적용되지 않는 것 같습니다. 어떻게하면 버튼을 클릭 할 때마다 반복적으로 더 많은 버튼이 동작하도록 변경할 수 있습니까?

+1

확인 DOC, 그들은) ((CSTE 연구진 사용) 또는 .delegate 대표 –

+0

참조 이벤트 위임에 대해 이야기하고, 또는 당신은 또한 .clone를 사용하여 기존 요소를 복제 할 수 있습니다 (참, 참) – Virus721

+1

@ A.Wolff 아니요, 오늘 우리는 이벤트 대표단 질문이 충분하지 않습니다. :) – undefined

답변

2

는 동적

$(document).on("click",'.more', function(){ 
     //your code 
}); 
를 추가 요소의 부모에 이벤트를 위임 할 필요가

위임 된 이벤트가 이후에 문서에 추가됩니다 하위 요소에서 이벤트를 처리 할 수있는 장점이 있습니다 시각. 위임 된 이벤트 처리기가 연결된 시간에 존재하도록 보장 된 요소를 선택하면 에 위임 된 이벤트를 사용하여 이벤트 처리기를 자주 연결하고 제거하지 않아도됩니다 (reference).

관련 문제