22

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

41

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.

2
  • 1
    @Dr.GianluigiZaneZanettini I don't think this answer has the best solution, because you can add the name in where you define your anonymous function, like so: xxx.click(function handlerName(){$(this).off("click", handlerName)}) Jun 4, 2016 at 8:59
  • function handlerName().. is equivalent to $handlerName = function().. Oct 15 at 16:18
7

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.

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

0
1

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/

3
  • $(document) has a performance hit. you should only need to use this if your elements are dynamically added. May 13, 2016 at 10:43
  • @TarranJones the performance hit should be negligible with ~10 elements, but still: thanks for pointing it out. May 13, 2016 at 13:33
  • 1
    yea, your right, its says in the docs that it only really makes a differance when it comes to mousemove events. May 13, 2016 at 13:41
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.