jQuery 事件处理程序不适用于动态内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15090942/
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
Event handler not working on dynamic content
提问by edelweiss
I have a tag A in which when clicked on, it appends another tag B to perform an action B on click. So when I click on tag B, action B is performed. However, the .onmethod does not seems to be working on the dynamically created tag B.
我有一个标签 A，当点击它时，它会附加另一个标签 B 以在点击时执行操作 B。因此，当我单击标签 B 时，将执行操作 B。但是，该.on方法似乎不适用于动态创建的标签 B。
My html and jquery for tag A is as below:
我的标签 A 的 html 和 jquery 如下：
<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>');
})
When tag B is clicked, some action B is performed. My jquery is as below:
单击标签 B 时，将执行某些操作 B。我的jQuery如下：
$('.update').on('click',function(){
//action B
});
I have some non dynamic content which has class ".update" as well. In the .on()method above works fine for the non dynamic content, but not for the dynamic content.
我有一些非动态内容也有类“.update”。在.on()上面的方法中，对于非动态内容可以正常工作，但对于动态内容则不行。
How can I make it work for dynamic content?
如何使其适用于动态内容？
回答by Denys Séguret
You have to add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content).
您必须添加 selector 参数，否则事件将直接绑定而不是委托，这仅在元素已经存在时才有效（因此它不适用于动态加载的内容）。
See http://api.jquery.com/on/#direct-and-delegated-events
请参阅http://api.jquery.com/on/#direct-and-delegated-events
Change your code to
将您的代码更改为
$(document.body).on('click', '.update' ,function(){
The jQuery set receives the event then delegates it to elements matching the selector given as argument. This means that contrary to when using live, the jQuery set elements must exist when you execute the code.
jQuery 集接收事件，然后将其委托给与作为参数给出的选择器匹配的元素。这意味着与使用时相反，live当您执行代码时，jQuery 集合元素必须存在。
As this answers receives a lot of attention, here are two supplementary advises :
由于这个答案受到了很多关注，这里有两个补充建议：
1)When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.
1)在可能的情况下，尝试将事件侦听器绑定到最精确的元素，以避免无用的事件处理。
That is, if you're adding an element of class bto an existing element of id a, then don't use
也就是说，如果您将 class 的元素添加b到 id 的现有元素a，则不要使用
$(document.body).on('click', '#a .b', function(){
but use
但使用
$('#a').on('click', '.b', function(){
2)Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c"would retrieve only one element with this id.
2）小心，当你添加一个带有 id 的元素时，确保你不会添加它两次。在 HTML 中拥有两个具有相同 id 的元素不仅是“非法的”，而且还会破坏很多事情。例如，选择器"#c"将仅检索具有此 id 的一个元素。
回答by Samuel Liew
You are missing the selector in the .onfunction:
您缺少.on函数中的选择器：
.on(eventType, selector, function)
This selector is very important!
这个选择器很重要！
If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated eventsto attach an event handler
如果将新 HTML 注入页面，则在将新 HTML 放入页面后选择元素并附加事件处理程序。或者， 使用委托事件附加事件处理程序
See jQuery 1.9 .live() is not a functionfor more details.
有关更多详细信息，请参阅jQuery 1.9 .live() is not a function。
