不支持动态内容的事件处理程序

208

我有一个标签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 
});

我有一些非动态内容类“.update”以及。上面的方法.on()对于非动态内容工作正常，但不适用于动态内容。

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

来源

2013-02-26 edelweiss

您应该使用事件委托在动态添加的DOM元素上绑定事件。 http://api.jquery.com/delegate/ – 2016-03-25 08:42:32

486

您必须添加选择器参数，否则事件会直接绑定而不是委托，这只有在元素已经存在（所以它不适用于动态加载的内容）时才起作用。

见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的一个元素。

来源

2013-02-26 13:57:06

or'委托'为1.7之前:) – mattytommo 2013-02-26 13:58:29

请注意，委托和参数颠倒：它是（'点击'，'选择器，功能（）{.. 。}）但代表（'选择器'，'点击'，功能（）{...}） – PapaFreud 2013-09-06 11:01:26

这不适用于手机/平板电脑设备。 – Anna 2013-11-20 16:35:35

您在.on功能缺失的选择：

.on(eventType, selector, function)

这个选择是非常重要的！

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

如果新的HTML被注入页面中，选择元素和附加事件处理程序的新的HTML被放置到页面后。或者， 使用委派事件附加的事件处理程序

详情请参阅jQuery 1.9 .live() is not a function。

来源

2013-02-26 13:59:15

不支持动态内容的事件处理程序

回答

相关问题