事件处理程序不能处理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内容？

Answer 1

您必须添加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的元素。

Answer 2

您在.on函数中缺lessselect器：

 .on(eventType, selector, function) 

这个select器非常重要！

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

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

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