事件处理程序不能处理dynamic内容

我有一个标签A,当点击它时,它会附加另一个标签B来执行点击操作B. 所以当我点击标签B时,就会执行动作B. 但是, .on方法似乎不能在dynamic创build的标签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 }); 

我有一些非dynamic的内容,也有类“.update”。 上面的.on()方法对于非dynamic内容可以正常工作,但对于dynamic内容则不行。

我如何使它适用于dynamic内容?

您必须添加select器参数,否则事件直接绑定,而不是委托,这只有当元素已经存在(所以它不适用于dynamic加载的内容)。

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

改变你的代码

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

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

由于这个答案受到很多关注,这里有两个补充build议:

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

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

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

但使用

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

2)小心,当你添加一个ID的元素,以确保你没有添加两次。 在HTML中,不仅是“非法的”,而且有两个具有相同ID的元素,但是它打破了很多东西。 例如,一个select器"#c"将只检索一个具有这个ID的元素。

您在.on函数中缺lessselect器:

 .on(eventType, selector, function) 

这个select器非常重要!

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

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

查看jQuery 1.9 .live()不是更多细节的函数 。