关于jquery：事件处理程序不处理动态内容

Event handler not working on dynamic content

本问题已经有最佳答案，请猛点这里访问。

我有一个标记A，在其中单击时，它会附加另一个标记B来执行单击时的操作B。所以当我点击标签B时，动作B被执行。但是，.on方法似乎不适用于动态创建的标记b。

我的标签A的html和jquery如下：

1
2
3
4
5
6

Add Shipping address

$('.add_address').click(function(){
//Add another
$(document).append('Update');
})

单击标记B时，将执行一些操作B。我的jquery如下：

1
2
3

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

我有一些非动态内容，还有类".update"。在.on()方法中，对于非动态内容，上述方法的效果很好，但对于动态内容则没有效果。

如何使其适用于动态内容？

相关讨论

您必须添加选择器参数，否则事件将直接绑定，而不是委托，这仅在元素已经存在时有效(因此它不适用于动态加载的内容)。

参见http://api.jquery.com/on/直接和委托事件

将代码更改为

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

jquery集接收事件，然后将其委托给与作为参数提供的选择器匹配的元素。这意味着与使用live时相反，jquery set元素在执行代码时必须存在。

由于这些答案受到了广泛关注，以下是两个补充建议：

1)在可能的情况下，尽量将事件侦听器绑定到最精确的元素，以避免无用的事件处理。

也就是说，如果要将类b的元素添加到id a的现有元素中，则不要使用

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

但使用

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

2)在添加具有ID的元素时要小心，以确保不会添加两次。在HTML中，拥有两个具有相同ID的元素不仅是"非法的"，而且还会破坏很多东西。例如，选择器"#c"只检索一个具有此ID的元素。