jQuery .off():如何仅删除某个点击处理程序?

问题描述

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

I've an element with two handler bound to it:

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

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


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

我只尝试.off()其中之一，但是语法使我难以捉摸:-(我正在尝试使用.off()之间的某些东西.

I'm trying to .off() only one of them, but the syntax eludes me :-( I'm trying with something among the line of..

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

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

但这会同时删除两个处理程序.所以我正在尝试...

but this removes both the handler. So I'm trying with...

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

但是什么也没有去除.

所以我删除了中间空格:

So I removed the middle space:

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

但回到正题1:两个处理程序都被删除.

but back to square 1: both handler gets removed.

正确的语法将是...?

The right syntax would then be... ?

https://jsfiddle.net/6hm00xxv/

推荐答案

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

The .off(); method allows you to target multiple as will as a specific event.

• $('.pippo').off()将删除.pippo选择器的所有事件.
• $('.pippo').off('click')会删除.pippo
的所有click事件
• $('.pippo').off('click', handler)将使用该处理程序为.pippo选择器删除所有click事件.

• $('.pippo').off() would remove all events for the .pippo selector.
• $('.pippo').off('click') would remove all click events for the .pippo
• $('.pippo').off('click', handler) would remove all click events with that handler for the .pippo selector.

在您的情况下，用于添加事件侦听器的handler是匿名函数，因此无法在off()方法中使用handler来关闭该事件.剩下三个选项，要么使用变量，要么使用名称空间，或者同时使用两者.

In your case the handler used to add the event listener was an anonymous function so the handlercannot be used in the off() method to turn off that event.That leaves you with three options, either use a variable, use a namespace or both.

弄清楚要使用哪个是非常简单的.

Its quite simple to figure out which one to use.

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和处理程序.

It would work just as well to assign you handler to a variable if you prefer.This allows you to specify which selector, eventType and handler to remove.

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

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

但是通常，如果不需要，则不应创建变量.

But as a rule you shouldn't create variables if there not needed.

这篇关于jQuery .off():如何仅删除某个点击处理程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！