jQuery ajax和dom問題

我正在使用JQuery向表中添加一行。在行內是一個元素誰是我捕獲的點擊事件：jQuery ajax和dom問題

$(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，但點擊事件不再抓獲。在這裏發生的範圍或關閉是否存在問題？

來源

2010-08-23 aeq

使用

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

這使得它已被用於

more info

來源

2010-08-23 17:05:30 lnrbob

哇，那工作的感謝！你能解釋爲什麼這有效嗎？我的意思是，我創建了dom元素創建後的點擊處理程序......任何方式都不能接受你的答案，當它讓我 – aeq 2010-08-23 17:07:40

哦，是不是因爲ajax調用是異步的？所以基本上，在註冊處理程序 – aeq 2010-08-23 17:10:50

之前，dom並沒有真正創建。當新元素被添加到頁面時，需要使用.live（），無論是使用ajax還是僅添加一個添加到點擊函數中的元素。基本的經驗法則，如果你的DOM正在改變使用.live（）。看看我的答案中的更多信息鏈接，以及更多信息:) – lnrbob 2010-08-23 17:14:11

後，您應該考慮使用實況（）事件處理程序運行的單擊事件。它允許您創建一個與未來動態創建的元素相匹配的事件，這是目前沒有發生的事情。解決這個問題的另一種方法是將所有人都綁定到添加新表格行的位置，但live（）是更好的答案。

來源

2010-08-23 17:06:32

感謝這是問題 – aeq 2010-08-23 17:09:35

使用表格時，我喜歡使用.delegate()。它與.live()非常相似，但可讓您在單個元素上設置事件偵聽器，而不是在每個子元素上都有單獨的處理程序。所以無論你有一行還是1000行，你仍然只需要一個處理程序。

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

來源

2010-08-23 17:19:19

我同意'.delegate（）'over'.live（）'。如果新元素都在一個表中，那麼不妨將該處理程序限制爲該表中的點擊事件而不是整個文檔。 +1 – user113716 2010-08-23 17:49:05

jQuery ajax和dom問題

回答

相關問題