.on()을 사용하여 jquery가 포함 된 페이지에 동적 삽입 단추에 이벤트 첨부하기

Question

나는 사용자 포스트를 반환하는 페이지가 있습니다.이 포스트는 새로운 코멘트가 게시 된 후 jquery 코드를 사용하여 즉석에서 주석 처리 될 수 있습니다. 게시물 아래의 새로운 댓글은 Delete 버튼입니다. 문제는 페이지를 새로 고침하지 않는 한 Delete 버튼이 새로 삽입 된 요소에서 작동하지 않는다는 것입니다. 나는 솔루션이 .on() 메소드를 사용하고 있음을 읽었지 만, 이것을 구현하는 방법에 대해서는 조금 혼란 스럽다. 내가 새로 삽입 된 코멘트와 함께 포스트 부분을 업데이트 한 기능을 가지고 있고이 코멘트를 삭제하는 기능입니다 : 내가 여기 어떻게 변경해야 이해하지

$(document).ready(function() { 

    $("button[id*='deletecmnt_']").click(function() { 

     var id = this.id.replace('deletecmnt_', ''); 

     var comment_card_id = ('#comment_' + id); 

     var token = $(this).data('token'); 

     $.ajax({ 
      url: '../comment/' + id, 
      type: 'post', 
      data: {_method: 'delete', _token: token}, 
      success: function() { 


       // Checks for display of comment card and removes it 
       if ($(comment_card_id).is(":visible")) { 

        $(comment_card_id).fadeOut("fast"); 

       } 
      } 
     }) 

    }) 

}); 

.

Answer 1

동적으로 추가 된 요소에 이벤트 위임을 사용해야합니다. .on() 메서드에서 핸들러를 만든 후 첨부 할 선택기를 추가해야합니다.

$(document).ready(function(){ 

    $("body").on("click", "button[id*='deletecmnt_']", function() { 
    // codes 
    } 
}); 

이것은 선택자와 일치하는 아직 생성되지 않은 요소에 대한 클릭을 수신합니다. 자세한 내용은 JQuery API 문서 페이지를 참조하십시오. http://api.jquery.com/on/