取消绑定 jQuery 单击事件并不总是有效

Question

已更新 FIDDLE（使用这个） http://jsfiddle.net/60j9hhz7/10/

html:

<div class="mycontainer">
  <a href="#" class="test">test</a>   
</div><br/>
<a href="#" class="unbind">doesn't work</a><br />
<a href="#" class="unbind2">works</a><br />
<a href="#" class="unbind3">works too</a>

js:

$(document).on('click', '.test', function (e) {
  alert('hello');
});

$(document).on('click', '.unbind', function (e) {
  $(document).off('click', '.mycontainer a');
});

$(document).on('click', '.unbind2', function (e) {
   $(document).off('click');
});

$(document).on('click', '.unbind3', function (e) {
  $(document).off('click', '.test');
});

在 fiddle 中，您会看到第一个 off 不起作用（警报仍然弹出），而所有其他的都起作用。

有人可以解释这是为什么吗？是否有解决方案？我需要能够定位某个容器内的所有链接，但它们可能已将它们的点击事件与不同的选择器挂钩。

问题是 unbind2 太不具体而 unbind3 太具体

谢谢

Answer 1

这是您需要 .off() 使用与绑定 .on() 事件相同的选择器的问题

$(document).on('click', '.test', function (e) {//see .test
  alert('hello');
});

$(document).on('click', '.unbind', function (e) {
  $(document).off('click', 'a');//will not work
});

$(document).on('click', '.unbind2', function (e) {
   $(document).off('click');
});

$(document).on('click', '.unbind3', function (e) {
  $(document).off('click', '.test');//will work
});

exp2:

$(document).on('click', '.mycontainer a', function (e) {
  alert('hello');
});

$(document).on('click', '.unbind', function (e) {
  $(document).off('click', '.mycontainer a');//will work 
});

$(document).on('click', '.unbind2', function (e) {
  $(document).off('click');
});

$(document).on('click', '.unbind3', function (e) {
  $(document).off('click', '.test');//will not work
});

http://jsfiddle.net/60j9hhz7/11/

Answer 2

这在 off() doc:

中解释得很清楚（等等，可能确实很含糊...）

.off(事件[ 选择器] [ 处理程序] )

选择器 类型：字符串

A selector which should match the one originally passed to .on() when attaching event handlers

取消绑定 jQuery 单击事件并不总是有效

Unbinding jQuery Click Event doesn't always work

javascript

jquery

javascript-events