jquery .off(): how to remove a certain click handler only?

Question

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");
});

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');

but then nothing gets removed.

So I removed the middle space:

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

but back to square 1: both handler gets removed.

The right syntax would then be... ?

https://jsfiddle.net/6hm00xxv/

Answer 1

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

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

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
} 

In your case

• your handler is only used once so your handler should be an anonymous function.
• you wish to turn off the event and your handler is anonymous so use a namespace.

So it would look like this

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

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

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 they're not needed.