事件处理程序无法处理动态内容

我有一个标签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
});

我有一些有类的非动态内容”。更新”。上面的.on()方法适用于非动态内容，但不适用于动态内容。

如何使它适用于动态内容?

215518

小开

最佳答案

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

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

将代码更改为

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

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

由于这个回答受到了很多关注，这里有两个补充建议:

1）如果可能，尝试将事件监听器绑定到最精确的元素，以避免无用的事件处理。

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

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

但是使用

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

2）注意，当你添加一个带id的元素时，要确保你没有添加它两次。在HTML中使用相同id的两个元素不仅是“非法的”，而且会破坏很多东西。例如，选择器"#c"将只检索一个具有此id的元素。