動態地將jQuery事件處理程序添加到動態HTML中

Question

我有一個div部分，我通過jQuery ajax動態填充：

$('#treeview').append(data.d);

數據是一堆具有不同id的嵌套div。

我還有一些jQuery代碼使div成為樹視圖，具有+/-展開/折疊和動態數據填充：

 $('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2!
    $('div.tree div').click(function() {
        var o = $(this);
        o.children('div').toggle();
        o.filter('.parent').toggleClass('expanded');
        BindGridView($(this).attr('id'));
        return false;
    });

問題是當我將div粘貼到主樹視圖中時，一切都很好。 當我動態創建完全相同的文本時，是的，我比較了它，展開/折疊和動態數據填充不起作用; 但是我可以在我的頁面上看到正確的div布局。

我猜我需要在我做的時候添加click事件和addClass

$（ '＃樹視圖'）追加（data.d）。

但我無法弄清楚如何。

Answer 1

如果要動態地向DOM添加元素，則綁定到選擇器的現有事件處理程序將不起作用（例如click ）。

您需要使用live函數才能捕獲新創建的DOM元素中的事件。

---

應該指出的（ 因為它是由扎克L上的評論 ），截至jQuery的1.7 live已贊成不贊成on 。 一般建議是相同的（跟蹤動態元素），只是機制（ on vs live ）已經改變。

Answer 2

live()已棄用。

來自文檔 ：

使用.on()附加事件處理程序。 舊版jQuery的用戶應該使用.delegate()而不是.live() 。

Answer 3

您可以使用delegate()或live()將事件處理程序綁定到動態元素。 在大多數情況下， delegate()將是最有效的路徑，除非您無法預測DOM中動態元素的存在位置。

Answer 4

創建動態可點擊對象讓我有一段時間了。 我無法使delegate（）函數工作。 最后我發現了這個例子http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog

並將其修改為

var buttonClear = $('#formResult').parent().find('#formMessage'); buttonClear.append("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() { //點擊這里的按鈕動作});

formResult是頁面上已有的表單ID，formMessage是在提交表單后顯示的動態添加的消息。 該腳本在表單末尾添加一個按鈕以清除消息。