Question

我有一个绑定了两个处理程序的元素：

<button class="pippo pluto">
  push me
</button>

$('.pippo').on('click', function () {
    alert("pippo");
});


$('.pluto').on('click', function () {
    alert("pluto");
});

我正在尝试.off（）只有其中一个，但是语法使我不知道:-(我正在尝试使用其中的一些东西......

<button class="dai">
  remove
</button>

$('.dai').on('click', function () {
    $('.pippo').off('click');
  alert("ok, removed");
});

但这会删除处理程序。所以我正在尝试......

$('.pippo').off('click .pippo');

但是没有任何东西被删除。

所以我删除了中间空间：

$('.pippo').off('click .pippo');

但回到正方形1：两个处理程序都被删除了。

正确的语法是......？

https://jsfiddle.net/6hm00xxv/

Answer 1

.off();方法允许您将多个目标定位为特定事件。

$('.pippo').off()会删除.pippo选择器的所有事件。
$('.pippo').off('click')会移除click

.pippo

$('.pippo').off('click', handler)会删除click选择器的所有.pippo事件。

在您的情况下，用于添加事件侦听器的handler是匿名函数，因此无法在handler方法中使用off()来关闭该事件。这将为您提供三个选项，使用变量，使用命名空间或两者兼而有之。

弄清楚要使用哪一个很简单。

if( "The same handler is needed more than once" ){
    // you should assign it to a variable,
} else {
    // use an anonymous function. 
}

if ( "I intent to turn off the event" && ( "The handler is an anonymous function" || "I want to turn off multiple listeners for this selector at once" ) ){
    // use a namespace
}

在你的情况下

您的处理程序仅使用一次，因此您的处理程序应该是一个匿名函数。
您希望关闭该事件，并且您的处理程序是匿名的，因此请使用命名空间。

所以它看起来像这样

$('.pippo').on('click.group1', function () {
    alert("pippo");
});

$('.dai').on('click', function () {
    $('.pippo').off('click.group1');
    alert("ok, removed");
});

如果您愿意，也可以将处理程序分配给变量。这允许您指定要删除的选择器，eventType和处理程序。

var pippo_click = function (e) {
    alert("pippo");
});

$('.dai').on('click', function () {
    $('.pippo').off('click', pippo_click);
    alert("ok, removed");
});

但作为一项规则，如果不需要，你不应该创造变量。

Answer 2

使用jQuery的一个更简单的替代方法是为点击事件定义命名空间：

<activity
            android:name="com.hf.yuguo.home.TabActivityHome"
            android:screenOrientation="portrait" />

请注意，您的班级$('.pippo').on('click.first', ...); $('.pluto').on('click.second', ...); // Remove only the pippo listener $('.pippo').off('click.first');和pippo引用相同的元素，因此使用其中一个元素不会改变任何内容。

https://jsfiddle.net/6hm00xxv/2/

Answer 3

因为您正在为。click事件调用.off。它正在删除所选元素上的所有可能的点击事件。诀窍是定义一个处理程序并仅删除该特定处理程序。

function showPluto() {
  showMsg("pluto");
};

function showPippo() {
  showMsg("pippo");
};

function showMsg(text) {
  alert("showMsg called with text: " + text);
};

$('.pippo').on('click', showPippo);
$('.pluto').on('click', showPluto);

$('.dai').on('click', function() {
  $('.pippo').off('click', showPippo);
  alert("ok, removed");
});

Answer 4

好的，解决了。我只需将处理程序绑定到文档：

function showMsg(text) {
    alert("showMsg called with text: " + text);
};

$(document).on('click', '.pippo', function () {
    showMsg("pippo");
});


$(document).on('click', '.pluto', function () {
    showMsg("pluto");
});

$('.dai').on('click', function () {
    $(document).off('click', '.pippo');
  alert("ok, removed");
});

https://jsfiddle.net/6hm00xxv/1/

jquery .off（）：如何只删除某个点击处理程序？

4 个答案: