我有一个标签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()方法适用于非动态内容,但不适用于动态内容。

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


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

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

将代码更改为

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

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

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

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

也就是说,如果您正在向id为a的现有元素添加类b的元素,那么不要使用

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

但是使用

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

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


在.on函数中缺少选择器:

.on(eventType, selector, function)

这个选择器非常重要!

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

如果将新的HTML注入到页面中,请选择元素和 在将新HTML放入页面后附加事件处理程序。或者, 使用委托事件附加事件处理程序

请参阅jQuery 1.9 .live()不是函数了解更多细节。