事件处理程序不处理动态内容

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/

如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.或者, 使用委派事件来附加事件处理程序

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