不支持動態內容的事件處理程序

208

我有一個標籤A，當點擊它時，它會附加另一個標籤B以在點擊時執行操作B.所以當我點擊標籤B時，就會執行動作B.然而，.on方法似乎並不奏效上動態創建的標籤B.不支持動態內容的事件處理程序

我的HTML和jQuery的標籤A是如下：

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a> 

$('.add_address').click(function(){ 
    //Add another <a> 
    $(document).append('<a id="address" class="pull-right update btn btn-inverse btn-medium push-top">Update</a>'); 
})

當點擊標籤B，一些動作B是執行。我的jQuery如下：

$('.update').on('click',function(){ 
    //action B 
});

我有一些非動態內容類「.update」以及。上面的方法.on()對於非動態內容工作正常，但不適用於動態內容。

如何使它適用於動態內容？

來源

2013-02-26 edelweiss

您應該使用事件委託在動態添加的DOM元素上綁定事件。 http://api.jquery.com/delegate/ – 2016-03-25 08:42:32

486

您必須添加選擇器參數，否則事件會直接綁定而不是委託，這隻有在元素已經存在（所以它不適用於動態加載的內容）時才起作用。

見http://api.jquery.com/on/#direct-and-delegated-events

更改您的代碼

$(document.body).on('click', '.update' ,function(){

jQuery的集接收事件則代表它指定的參數選擇匹配的元素。這意味着，與使用live時相反，執行代碼時必須存在jQuery集合元素。

由於這個答案受到了很多的關注，這裏有兩個補充建議：

1）當它是有可能，儘量事件監聽器綁定到最精確的元素，以避免無用的事件處理。

也就是說，如果您要添加b類的元素ID a的現有元素，那麼就不要使用

$(document.body).on('click', '#a .b', function(){

但使用

$('#a').on('click', '.b', function(){

2）在添加帶有ID的元素時要小心，以確保不會添加兩次。它不僅在HTML中是「非法的」，而且有兩個具有相同ID的元素，但它破壞了很多東西。例如，選擇器"#c"將只檢索具有此ID的一個元素。

來源

2013-02-26 13:57:06

or'委託'爲1.7之前:) – mattytommo 2013-02-26 13:58:29

請注意，委託和參數顛倒：它是（'點擊'，'選擇器，功能（）{.. 。}）但代表（'選擇器'，'點擊'，功能（）{...}） – PapaFreud 2013-09-06 11:01:26

這不適用於手機/平板電腦設備。 – Anna 2013-11-20 16:35:35

您在.on功能缺失的選擇：

.on(eventType, selector, function)

這個選擇是非常重要的！

http://api.jquery.com/on/

如果新的HTML被注入頁面中，選擇元素和附加事件處理程序的新的HTML被放置到頁面後。或者， 使用委派事件附加的事件處理程序

詳情請參閱jQuery 1.9 .live() is not a function。

來源

2013-02-26 13:59:15

不支持動態內容的事件處理程序

回答

相關問題