如何解除动态元素的事件绑定？

Question

我使用以下内容在动态插入到 DOM 的某些元素上绑定click事件。

jQuery('#cont').on('click', '.myElement1', ....);

在这种情况下，我将如何解unbind它们？

就其价值而言， jQuery('.myElement1').unbind('click')不起作用，因为单击事件内部的代码正在执行多次，因为click事件被多次注册。

Answer 1

您无法取消绑定.myElement1上的事件处理程序，因为它已绑定到#cont 。 无法在不影响所有其他实例的情况下从单个.myElement1实例中删除事件。

您可以做的解决方法是向.myElement添加另一个类，然后从动态选择器中排除该类：

 $('#cont').on('click', '.myElement1:not(.ignore)', function() { console.log('Foo clicked'); }); $('.add').click(function() { var $div = $('<div>Foo</div>').appendTo('#cont'); $div.addClass($(this).data('class')); });

 .ignore { color: #C00; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="add" data-class="myElement1">Add clickable</button> <button type="button" class="add" data-class="myElement1 ignore">Add unclickable</button> <div id="cont"></div>

Answer 2

尝试使用jQuery('.myElement1').off('click')或.off()

那应该删除 eventHandler。

Answer 3

答案是：

jQuery('#cont').off('click', '.myElement1');

但是如果你在#cont 中有很多元素和很多事件（#cont 有孩子和孙子，很快）你可以这样做：

jQuery('#cont').off('', '');

就这样