JQuery ajax 및 dom issue

Question

JQuery를 사용하여 테이블에 행을 추가하고 있습니다. 행 내에서 나는 캡쳐하고있는 클릭 이벤트 요소를 가지고 있습니다.

$(document).ready(function() { 
    var newRow = "<tr> ... </tr>"; 
    $('tableName > tbody:last').append(newRow); 

    $(...).click(function() { // click event on newly inserted elem in the row 
     alert("click"); 
    }); 
} 

위대한 작품과 경고가 예상대로 나타납니다. 지금 아약스 호출을 통해 동적으로 새 행을 추가하고 XML을 구문 분석 할 때, 그것은 작동하지 않습니다 :

$(document).ready(function() { 
    getData(); 

    $(...).click(function() { // click event on newly inserted elem in the row 
     alert("click"); 
    }); 

    function getData() { 
     $.ajax({ 
      ... 
      success: function(data) { 
      //parse the xml 

      $('tableName > tbody:last').append(parsedXml); 
      } 
    }); 
} 

HTML 올바르게 DOM에 추가되지만 클릭 이벤트는 더 이상 캡처입니다. 범위 나 종결에 문제가 있습니까?

Answer 1

사용

$(...).live('click', function() { // click event on newly inserted elem in the row 
     alert("click"); 
    }); 

이 그것이 당신은 라이브() 이벤트 핸들러를 사용하여 조사한다

more info

Answer 2

를 사용한 후에 실행하는 클릭 이벤트를 유지합니다. 미래에 동적으로 생성 된 요소와 일치하는 이벤트를 만들 수 있습니다. 이는 현재 일어나지 않은 것입니다. 그것을 수정하는 또 다른 방법은 모든 테이블을 새로운 테이블 행을 추가하는 위치 아래로 바인딩하는 것이지만 live()는 훨씬 더 나은 대답입니다.

Answer 3

테이블을 사용할 때 .delegate()을 사용하고 싶습니다. .live()과 매우 비슷하지만 모든 자식 요소의 개별 처리기가 아닌 상위 요소에 이벤트 리스너를 설정할 수 있습니다. 따라서 하나의 행이나 1000 개의 테이블이 있더라도 하나의 핸들러 만 있으면됩니다.

$('#yourtable').delegate('your_descendant_element','click', function(){ 
    alert("click"); 
});