動態添加jQuery的事件處理程序以動態HTML

我有一個div節，我通過動態jQuery的AJAX填充：動態添加jQuery的事件處理程序以動態HTML

$('#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一切都很好。當我動態創建完全相同的文本時，是的，我比較了它，展開/摺疊&動態數據填充不起作用;不過，我可以在我的頁面上看到正確的div佈局。

我猜，我需要添加單擊事件& addClass當我做

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

但我無法弄清楚如何。

來源

2011-01-24 mike

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

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

應當注意（as it was in the comments by Zach L），截至jQuery 1.7live已被棄用，取而代之的on。一般建議是相同的（追蹤動態元素），只是機制（on vs live）已更改。

來源

2011-01-24 19:13:11 casperOne

類似$（＃樹視圖）.live（「點擊」，函數（）{VAR O = $（本）; o.children（ 'DIV'）切換（）; o.filter（」 .parent '）toggleClass。（' 擴大 '）; BindGridView（$（本）.attr（' 身份證'））; 返回FALSE; }）; – mike 2011-01-24 19:16:29

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

來源

2011-01-24 19:46:43

live()已棄用。

從docs：

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

來源

2012-03-09 21:06:02

創建動態可點擊對象也讓我受到了一段時間的困擾。我無法讓委託（）函數工作。後來我發現這個例子 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是在表單之後顯示的動態添加消息已提交。該腳本將一個按鈕添加到窗體的末尾以清除消息。

來源

2012-03-28 20:52:18

動態添加jQuery的事件處理程序以動態HTML

回答

相關問題