0

我正在尝试取消绑定一些与 绑定的事件处理程序.on()，但似乎没有任何效果：

HTML：

<div class='parent'>
    <a id='test-1' class='test'>Test 1</a>
    <a id='test-2' class='test'>Test 2</a>  
    <a id='test-3' class='test'>Test 3</a>
</div>
<hr>
<a class='unbind'>Unbind Test 1</a>

JS：

$('.parent').on('click', 'a.test', function(e){
    alert('click');
});

$('a.unbind').click(function(e){
    $('a#test-1').unbind('click');
    $('a#test-1').off('click');
});

小提琴：http: //jsfiddle.net/g9ucd/5/

澄清：根据示例，我想知道是否可以取消绑定以前绑定的特定.on()元素，而不是仅仅反转所有绑定.off()。

4

5 回答 5

2

这个怎么样：

var clickie = function(e){
    alert('click');
}

$('.parent').on('click', 'a.test', clickie);

$('a.unbind').click(function(e){
    $('.parent').off('click', 'a.test', clickie);
});

问题是，您从未设置处理程序a#test-1- 您将其设置为.parent. 您无法删除未设置的内容。如果您需要从 中删除处理程序a#test-1，则不得使用实时功能：$('.parent a.test').on('click', clickie)会将您的函数绑定到元素本身，因此您可以off单独使用它们。

于 2013-09-03T02:13:58.280 回答
2

你可以试试这个

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

$('a.unbind').click(function(e){
    $('a#test-1').unbind('click');
    $('a#test-1').off('click');
});
于 2013-09-03T02:20:15.310 回答
2

方法文档上的jQuery API声明事件实际上放置在调用它的元素上，您应用的过滤器选择器用于确定事件在哪些元素上有效。所以简短的回答是否定的，你不能从过滤器选择器指定的元素中解除绑定。

但是，您是否考虑过通过进一步限制选择器来解决这个问题？

您可以从 a 元素中删除测试类，然后在这种情况下，它将不再满足过滤器选择器的标准，因此与事件无关。

只是一个想法。

这是我的小提琴，下面是我改变的片段。

$('a.unbind').click(function(e){
    $('a#test-1').removeClass('test');
});
于 2013-09-03T02:30:50.153 回答
1

@ermagana和@Tadeck 的答案的一个变体只是:not在初始委托绑定上使用选择器。这样，您可以通过使用额外的类显式禁用它们来“取消绑定”某些元素。

（在这种情况下，我将使用该类，如果您使用Bootstrap等.disable，这将提供额外的好处，即在视觉上禁用它们。）

$('.parent').on('click', 'a.test:not(.disabled)', function(e){
    alert('click');
});

$('a.unbind').click(function(e){
    $('a#test-1').addClass('disabled');
});
于 2013-09-03T13:30:41.583 回答
1

您需要为其添加更多逻辑：

$('.parent').on('click', 'a.test', function(e){
    // retrieve switch value:
    var disable_calls = $(this).data('disable-calls') || false;
    if (!disable_calls){
        // your logic here...
        alert('click!');
    };
});

$('a.unbind').click(function(e){
    // disable call by turning the switch:
    $('a#test-1').data('disable-calls', true);
});

事件处理程序附加到外部元素 ( .parent) 并且 jQuery 为您提供了实际检查的快捷方式event.target（您可以通过在.on()调用中提供选择器来做到这一点）。要更改该逻辑，您需要添加自己的特殊处理，例如。确保选择器不再匹配：

$('.parent').on('click', 'a.test.calls-enabled', function(e){
    alert('click!');
});

$('a.unbind').click(function(e){
    // disable call by turning the switch:
    $('a#test-1').removeClass('calls-enabled');
});
于 2013-09-03T02:31:30.607 回答