jQuery ajax和dom問題

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");
   });
}

這很好用，並且警報按預期出現。 但是，當我現在通過ajax調用動態添加新行並解析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，但不再捕獲click事件。 這里的作用域或關閉是否有問題？

Answer 1

采用

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

使用Click事件后，它將保持運行狀態

更多信息

Answer 2

當使用表時，我喜歡為此使用.delegate() 。 它與.live()非常相似，但是允許您在單個父元素上設置事件偵聽器，而不是在每個子元素上設置單獨的處理程序。 因此，無論您的表是一行還是1000，您仍然只需要一個處理程序。

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

Answer 3

您應該研究使用live（）事件處理程序。 它使您可以創建一個事件，該事件與將來動態創建的元素進行動態匹配，而現在還沒有發生這種情況。 解決該問題的另一種方法是將所有內容向下移動到附加新表行的位置下方，但是live（）是一個更好的答案。