jQuery: how to unbind an event binded to document object?

Question

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

Click to copy

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

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

Click to copy

$("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 !

Answer 1

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:

Click to copy

$(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...

Answer 2

Click to copy

$("#keep_first_only_button")...

Missing the hash?

Answer 3

For anyone wondering ...Mattias Buelens is correct.

If you have the element bound like

Click to copy

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

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

Click to copy

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