我試圖對動態添加到頁面上某個容器的元素進行一些有條件的處理，但我錯過了一個事件。加載動態元素的jQuery

說我有一個容器：

<div id="container"></div>

我可以很容易地綁定一個事件處理程序爲所有新元素的點擊功能，使用

$('#container').on('click', '.sub-element', function() { ... });

可是我該怎麼綁定，以便當元素被添加到#container時，獲得「一次性」鉤子。我試圖綁定到ready和load無濟於事。有沒有辦法做到這一點，或者我必須想出解決我的問題的另一種解決方案？

This fiddle contains my non-working example。

來源

2012-03-07 Klaus Byskov Pedersen

*在所有瀏覽器中，加載事件不會冒泡。在Internet Explorer 8及更低版本中，粘貼和重置事件不會冒泡。這些事件不支持與委派一起使用，但可以在事件處理程序直接附加到生成事件的元素時使用。*（http://api.jquery.com/on/）現在，關於如何解決這個問題... – Corbin 2012-03-07 22:52:14

這是一個問題，以消除'負載'功能，你正試圖完成所有的一切，而是操作後，項目已附加'鏈'的HTML？ $（'＃container'）。append（'

No worky!

'）.html（'yaay！'）; – Ohgodwhy 2012-03-07 22:52:24

@Ohgodwhy不是我無法想出一個解決方法（對於這個愚蠢的例子更是如此），我只想知道是否有一個我錯過的事件可以用於我的目的描述。 – 2012-03-07 22:55:37

您可以將新添加的DOM元素上觸發一個自定義事件，可以拾取由一個jQuery的事件處理程序：

//bind to our custom event for the `.sub-element` elements 
$('#container').on('custom-update', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}); 

//append a new element to the container, 
//then select it, based on the knowledge that it is the last child of the container element, 
//and then trigger our custom event on the element 
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update');

這裏是一個演示：http://jsfiddle.net/ggHh7/4/

這種方法可以讓你即使通過不同的方法加載動態內容，也要全局做些事情。

更新

我不知道該瀏覽器支持的（我假設IE8及以上不支持），但你可以使用DOMNodeInserted突變事件檢測時被添加DOM元素：

$('#container').on('DOMNodeInserted', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}) 

$('#container').append('<div class="sub-element">No worky!</div>');

這裏是一個演示：http://jsfiddle.net/ggHh7/7/

UPDATE

有一個新的API THI s爲DOMNodeInserted此時折舊。我還沒有看過，但它被稱爲MutationOvserver：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

來源

2012-03-07 22:55:18 Jasper

有趣的，+1和所有......所以你說的是，當某些第三方plugIn將某個元素添加到某個容器時，我無法收到通知。如果我不是那個追加它的人，我會被搞砸嗎？ – 2012-03-07 22:58:26

您可以設置一個間隔，每隔一段時間檢查一次新的DOM元素。否則有突變事件，'DOMNodeInserted'可能是你想要什麼，但瀏覽器的支持可能不是你所需要的：https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/DOM_Events（看'變異和突變名稱事件類型「部分）。有關使用DOMNodeInserted的示例，請參閱我的**更新**。 – Jasper 2012-03-07 23:00:46

你需要使用一個方法，如長輪詢監視長度變化的元素，如果長度的更改，然後搶在長度上的差異。這會給你任何'對象'駐留在那裏。這是非常規的，但它會起作用。 – Ohgodwhy 2012-03-07 23:04:30

看完上面的回答後，我現在已經成功地使用此：

$('body').on({ 
    DOMNodeInserted : function(){ 
     alert('I have been added dynamically'); 
    }, 
    click : function(){ 
     alert('I was clicked'); 
    }, 
    '.dynamicElements' 
});

現在，當他們加載的所有我dynamicElements可以做的東西，利用真棒.on()事件地圖。

來源

2013-03-03 01:16:47 tim

加載動態元素的jQuery

回答

更新

UPDATE

相關問題