正在取消绑定与.on()绑定的事件处理程序

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

方法文档中的jQuery API声明事件实际上被放置在从中调用的元素上，然后使用您应用的过滤器选择器来确定事件在哪些元素上有效。因此，简短的回答是否，即使从过滤器选择器指定的元素中也无法解除绑定。

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

您可以从a元素中删除测试类，然后在这种情况下，它将不再满足筛选器选择器的条件，从而与事件解除绑定。

只是一个想法。

这是我的小提琴，下面是我换的剪好的。

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

这个怎么样：

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

你可以试试这个

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

您需要添加更多的逻辑：

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

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

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

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

相关内容

最新更新

热门标签：