Is it possible to remove one specific event handler from an event with multiple handlers?

Question

As i searched for the solution of a problem i have right now, i found this thread: jQuery: more than one handler for same event. Now i wonder if it is possible to remove just a single one of these handlers?

This can't be done easily. You have to do a hack, jQuery wasn't designed for this. use event namespacing instead. — Raynos, Feb 27 '11 at 22:06
I think that if you store the event handler in a variable you might be able to remove it the same way you ad it, with the variable, but I have not tested it. — David Mårtensson, Feb 27 '11 at 22:08
@Raynos: if I understand the question, you are incorrect - see my answer. — Matt Ball, Feb 27 '11 at 22:26
@MattBall I was thinking anonymous functions. Yes you can unbind a function if you have a pointer to this. — Raynos, Feb 28 '11 at 12:56

Matt Ball · Accepted Answer · 2011-02-27T22:25:42.377

84

It is possible, if you don't use anonymous callbacks:

var $elt = $(...);

function clickHandler1(event){...}
function clickHandler2(event){...}

// bind both
$elt.click(clickHandler1);
$elt.click(clickHandler2);

// unbind just the first
$elt.unbind('click', clickHandler1);

A wild Demo appeared!

See also: .unbind() docs.

edited Feb 27 '11 at 22:25

answered Feb 27 '11 at 22:19

Matt Ball

354,903
100
647
710

16

Wild Demo appeared! :-D – maryisdead Jul 17 '15 at 11:26
4

Note that `bind`, `unbind` is deprecated on v3.0, use `on`, `off` instead. – wonsuc Oct 21 '19 at 00:34

score 60 · Answer 2 · answered Oct 30 '14 at 21:03

60

Actually, you can do it using anonymous callbacks via event namespacing:

$elt.bind('click.handler1', function(event) {
    alert('click handler 1');
});

$elt.unbind('click.handler1');

See modified demo here.

And here for more information.

This was added in jQuery 1.4.3, which actually came out more than 4 months before the question was asked.

answered Oct 30 '14 at 21:03

Kevin Jurkowski

1,244
14
15

can we pass parameters in the function? – Vikas Bansal May 02 '16 at 08:43
This is a real good answer when using anonymous callback. Loving it. – Gael.D Jul 06 '16 at 13:05
1

This should be the accepted answer, as most bind/on calls will have an anonymous function. – Jul 19 '16 at 14:55
1

Thank you very much for that answer, tried $(document).on('keydown.fake', function(){}); --->>> $(document).on('keydown.fake'); Haven't noticed event namespaces in .on() .off() documentation – Yehor Jun 21 '17 at 18:35
2

One million points to you sir. Just used this to get around a very tricky issue. – Grenville Jul 21 '17 at 10:43

score 4 · Answer 3 · answered Jul 11 '19 at 02:37

This post is ages old, so I thought I'd chime in with how this is done today (2019).

Most of the old answers above, including the accepted answer (which was correct when it was written), use the unbind method which has been deprecated since jQuery v.3.0.

As of jQuery 3.0, .unbind() has been deprecated. It was superseded by the .off() method since jQuery 1.7, so its use was already discouraged.

Source

Here's how to do it with the .off() method:

var foo = function() {
  // Code to handle some kind of event
};

// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).on( "click", "p", foo );

// ... Foo will no longer be called.
$( "body" ).off( "click", "p", foo );

Source

This will work for all event handlers implemented with the .on() method and it works for undelegated event handlers as well. Simply replace "body" with your element selector and remove the second parameter of the .off() method ("p" in the example above).

Is it possible to remove one specific event handler from an event with multiple handlers?

3 Answers3

Linked