15

I've a bad-programmed library which is doing this

$(document).on('click','#keep_first_only_button', function(){

I wrote, after this, a piece of code to 'override' this bad behaviour

$("keep_first_only_button").unbind("click");
$("keep_first_only_button").on("click", selectKeepFirstOfAll);

BUT this is not working, then document.click function handler is triggered again

I cannot unbind all click events from document, because disasters will happen in the page.

Which is the right way to proceed in this situation?

EDIT: Sorry for time loosing question, I didn't see the missing '#' in my selector. I'm really sorry !

1
  • This works, but the problem, as reported from preferred answer is I simply the missing '#' ... ) :( Sorry
    – realtebo
    Jun 6 '13 at 14:02
28

The original event handler was bound as a delegated event, so you can't remove it from $('#keep_first_only_button') itself. You need to remove it on the document level.

From the documentation:

To remove specific delegated event handlers, provide a selector argument. The selector string must exactly match the one passed to .on() when the event handler was attached. To remove all delegated events from an element without removing non-delegated events, use the special value "**".

In other words, to unbind a delegated event, you should just use the same set of arguments you used to bind them but pass them to off instead. Since the bound function is anonymous you can't reference it, so you'll have to settle with unbinding all delegated event handlers bound to #keep_first_only_button on the document level:

$(document).off('click', '#keep_first_only_button');

EDIT: Looks like the problem was just the missing hash. Odd, I thought you couldn't unbind delegated event handlers using a regular .off() call...

3
  • Your answer is certainly usefull, thanks, but, really, off does the work, I tried crossbrowser, and i'ts all working.
    – realtebo
    Jun 6 '13 at 16:50
  • I'm using jquery dialog and when i load the page in the dialog i'm using: $(document).on('click', '.blahblah', function() {}); and could not for the life of me figure out why $('.blahblah').off() wasn't clearing the click event. this answer just saved me another half day of digging. Thank you!
    – RJ Cole
    Sep 1 '16 at 20:53
  • 1
    Mate you save me a lot of time. Thx
    – kostas ch.
    Dec 15 '16 at 11:46
7
$("#keep_first_only_button")...

Missing the hash?

4
  • 1
    Oh my God, please don't downvote my question, this was the problem .... sorry ...
    – realtebo
    Jun 6 '13 at 14:01
  • 1
    I wouldn't downvote it because it's a genuine, well explained question, but I'll hold it randsom for an accepted answer :D
    – dKen
    Jun 6 '13 at 14:03
  • 1
    Really now, a missed hash? I'd expect you can't unbind a delegated event handler using $('#foo').off('click'). Then there must be something more to $.off()... Jun 6 '13 at 14:08
  • 1
    Downvoter, one of the most important aspects of StackOverflow is that if you downvote someone, you explain why so everyone here can learn. To downvote and leave without explaining why adds no value and robs people from furthering their education. I'd be grateful if you explained what's wrong with this answer.
    – dKen
    Jun 29 '16 at 9:32
5

For anyone wondering ...Mattias Buelens is correct.

If you have the element bound like

$(document).on("click","#element",function(){ });

And want to shut it off later, you have to do it as:

 $("#element").click(function(e) { 
    $(document).off('click', '#element'); 
});
0

If you want remove event with out consider selector use

$(document).off("click","**");

1
  • please note that this removes all click events which will have very bad consequences during user is on same page. Aug 18 at 3:59

Your Answer

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

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