jQuery 加载动态元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9610267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery on load of dynamic element
提问by Klaus Byskov Pedersen
I'm trying to do some conditional manipulation of elements that are dynamically added to some container on a page, but I'm missing an event.
我正在尝试对动态添加到页面上某个容器的元素进行一些有条件的操作，但我错过了一个事件。
Say I have a container:
假设我有一个容器：
<div id="container"></div>
I can easily bind an event handler to the click function for all new elements, using
我可以轻松地将事件处理程序绑定到所有新元素的点击函数，使用
$('#container').on('click', '.sub-element', function() { ... });
But what do I bind to in order to get a "one-time" hook when the element is added to #container. I have tried to bind to readyand loadto no avail. Is there any way to do this, or do I have to come up with another solution to my problem?
但是当元素被添加到#container. 我试图结合ready并load无济于事。有什么办法可以做到这一点，还是我必须想出另一种解决方案来解决我的问题？
回答by Jasper
You can trigger a custom event on the newly added DOM element that can be picked-up by a jQuery event handler:
您可以在新添加的 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');
Here is a demo: http://jsfiddle.net/ggHh7/4/
这是一个演示：http: //jsfiddle.net/ggHh7/4/
This method allows you to do something globally even if you load the dynamic content through different methods.
即使您通过不同的方法加载动态内容，此方法也允许您全局执行某些操作。
Update
更新
I'm not sure of the browser support (I'll assume IE8 and older don't support this) but you can use the DOMNodeInsertedmutation event to detect when a DOM element is added:
我不确定浏览器是否支持（我假设 IE8 及更早版本不支持此功能）但您可以使用DOMNodeInserted突变事件来检测何时添加 DOM 元素：
$('#container').on('DOMNodeInserted', '.sub-element', function(){
$(this).html('<b>yaay!</b>');
})
$('#container').append('<div class="sub-element">No worky!</div>');
Here is a demo: http://jsfiddle.net/ggHh7/7/?
这是一个演示：http: //jsfiddle.net/ggHh7/7/？
UPDATE
更新
There is a new API for this as DOMNodeInsertedis depreciated at this time. I haven't looked into it but it's called MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
有一个新的 API，因为此时DOMNodeInserted已折旧。我没有研究过它，但它被称为MutationOvserver：https: //developer.mozilla.org/en-US/docs/Web/API/MutationObserver
回答by tim
After reading the above answer I now use this successfully:
阅读上述答案后，我现在成功地使用了它：
$('body').on({
DOMNodeInserted : function(){
alert('I have been added dynamically');
},
click : function(){
alert('I was clicked');
},
'.dynamicElements'
});
Now all my dynamicElementscan do stuff as they're loaded, utilizing the awesome .on()event map.
现在我dynamicElements可以在加载时做一些事情，利用很棒的.on()事件地图。
