Question

我正在尝试解除对特定元素的委托事件的绑定。现在，我找到了带有jQuery函数的元素并将其存储在变量中。

但由于它是一个变量并且它是一个委托事件，我不确定如何解除它的事件。

在这个例子中，当我点击其中一个Foo时，它的兄弟（Bar）事件应该是未绑定的：

HTML：

<div>
    <p class="foo">Foo 1</p>
    <p class="bar">Bar 1</p>
</div>

<div>
    <p class="foo">Foo 2</p>
    <p class="bar">Bar 2</p>
</div>

JS

$(document).on('click', '.bar', function() {
    alert('Bar');
});

$(document).on('click', '.foo', function() {
    alert('Foo');
    var $sibling = $(this).siblings('.bar');
    // unbind $sibling
});

我试过了：

$sibling.off();

$sibling.unbind();

$(document).off('click', $sibling);

$(document).unbind('click', $sibling);

这些都不起作用。

这是小提琴http://jsfiddle.net/pyL2sLfx/1/

Answer 1

$(document).on('click', '.bar', function() {

这并不会在每个＆＃39; .bar＆＃39;上动态绑定事件监听器。元件。这会绑定文档上的事件侦听器，例如发生单击时，当事件冒泡到文档时，如果事件目标与'.bar'匹配，则调用侦听器。

两个解决方法

with classes：

$(document).on('click', '.bar', function() {
    if( $(this).hasClass('disabled') ) return;
    alert('Bar');
});

$(document).on('click', '.foo', function() {
    alert('Foo');
    var $sibling = $(this).siblings('.bar');
    // unbind $sibling
    $sibling.addClass('disabled');
});

with stopPropagation：

$(document).on('click', '.bar', function() {
    alert('Bar');
});

$(document).on('click', '.foo', function() {
    alert('Foo');
    var $sibling = $(this).siblings('.bar');
    // unbind $sibling
    $sibling.on('click', function(event) {
        event.stopPropagation();
    });
});

文档：event.stopPropagation()

以下是variation of the second workaround，您可以根据需要致电$sibling.off('click', stopPropagation);。

Answer 2

您在文档上绑定事件，而不在p元素上绑定事件。但是你正试图解开p元素。

将原始绑定更改为此。

$(function () {
    $('.bar').on('click', function() {
        alert('Bar');
    });

    $('.foo').on('click', function() {
        alert('Foo');
        var $sibling = $(this).siblings('.bar');
        $sibling.unbind();
    });
});

取消绑定委托事件，其中jQuery对象存储在变量中

2 个答案: