javascript - 如何解绑动态元素的事件？

Question

我使用以下代码将 click 事件绑定(bind)到动态插入到 DOM 中的某些元素上。

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

在这种情况下，我将如何解除绑定(bind)它们？

就其值(value)而言，jQuery('.myElement1').unbind('click') 无法正常工作，因为点击事件中的代码执行了多次，因为 click 事件被多次注册。

Answer 1

您不能取消绑定(bind) .myElement1 上的事件处理程序，因为它已绑定(bind)到 #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>