Question

我正在尝试取消绑定与.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()的所有绑定。

Answer 1

这个怎么样：

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它们。

Answer 2

你可以试试这个

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

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

Answer 3

jQuery API on method文档指出事件实际上放在被调用的元素上，您应用的过滤器选择器用于确定事件有效的元素。所以简短的回答是NO，你不能从过滤器选择器指定的元素中解除偶数。

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

您可以从a元素中删除测试类，然后根据该场景，它将不再符合过滤器选择器的条件，因此无法解决该事件。

只是一个想法。

这是我的fiddle，下面是我改变的剪辑。

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

Answer 4

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

$('.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');
});

Answer 5

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

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

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

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

与.on（）绑定的解绑定事件处理程序

5 个答案: