事件处理程序不适用于动态内容

Question

我有一个标签A，当点击时，它会附加另一个标签B，以在点击时执行操作B。因此，当我单击标记B时，将执行操作B。但是，.on方法似乎不能在动态创建的标记B上工作。

我的标签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>');
})

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

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

我有一些非动态的内容，其中也有类".update“。上面的.on()方法适用于非动态内容，但不适用于动态内容。

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

Answer 1

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

请参阅http://api.jquery.com/on/#direct-and-delegated-events

将代码更改为

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

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

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

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

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

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

而是使用

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

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

Answer 2

.on函数中缺少选择器：

.on(eventType, selector, function)

这个选择器非常重要！

http://api.jquery.com/on/

如果要将新的超文本标记语言注入到页面中，请在将新的超文本标记语言放置到页面中之后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序

有关更多详细信息，请参阅jQuery 1.9 .live() is not a function。