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

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/

4 Answers
4

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

.off();

$('.pippo').off()

.pippo

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

click

.pippo

$('.pippo').off('click', handler)

click

.pippo

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.

handler

handler

off()

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

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 there not needed.

xxx.click(function handlerName()$(this).off("click", handlerName))

One easier alternative with jQuery is to define a namespace for your click events:

$('.pippo').on('click.first', ...);
$('.pluto').on('click.second', ...);

// Remove only the pippo listener
$('.pippo').off('click.first');


Note that your classes pippo and pluto refer to the same element so using one or the other will not change anything.

pippo

pluto

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

Ok, solved. I just had to bind the handler to document:

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/

$(document)

Because you are calling .off for click event. It is removing all possible click events on that selected element. The trick is to define a handler and remove that particular handler only.

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


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy