Remove delegate event from a changed element

Question

I have a modal which content is dynamic, and this modal has a reject button.

This modal itself is generated dynamically via a link, so I have to use delegate

$( "body" ).delegate( ".reject", "click", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

Let's say the user click on the reject button and close the modal. Then she loads a new modal, so this modal's context changing and has a new reject button.

The moment user click the reject button again on this new context, somehow someFunction() executed twice - once from the original click, and second one from this new click. Close the modal again, load a new context, execute the click and voila.. got three someFunction() calls!

After some research, this is what I found: When replace element, what happen on the events and data

How to prevent this?

it looks like you are executing the above code on each call to show the modal... you need to execute this code only once in dom ready — Arun P Johny, Sep 26 '13 at 00:30
@PSL I'm binding these events after an ajax call that load the modal. — a0z0ra, Sep 26 '13 at 00:54
@Arun P Johny I can't do that since the modal's context is dynamic (from ajax) — a0z0ra, Sep 26 '13 at 00:55
@a0z0ra yes you can do it since the event delegation is used and the event is bound to the body element — Arun P Johny, Sep 26 '13 at 00:55
Hold on.. if your .reject button is not destroyed why you do it everytime, seems like you are binding the events again and again.. — PSL, Sep 26 '13 at 01:32
@PSL -- Yea, finally realized that I bound the events every time I launch the modal (and not calling 'off' or removing the handler). In the end I moved that delegate call outside the ajax and made adjustment. Thanks for the help! — a0z0ra, Sep 26 '13 at 16:40

jfriend00 · Accepted Answer · 2013-09-26T01:47:34.623

First off, if your .reject buttons on all your dialogs all have the same behavior and class names, then you can just leave the one delegated event handler in place and you don't need to install it again or remove the prior one. The beauty of using delegated event handling is that the target objects can come and go and the event handler remains in place just fine.

If you do have a reason for removing the original event handler and replacing it with something else and if you switch to using .on() instead of .delegate() (the current way of doing things in jQuery 1.7+), then you can do it like this:

$(document.body).on("click", ".reject", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

Then, you can uninstall the event handler with .off() like this:

$(document.body).off("click", ".reject");

Or, if you want to remove only a single delegated event handler for that event and selector, then you need to declare the function separately and then pass the same function to both .on() and .off().

function myHandler(e) {
    $(".modalInfo").hide();
    $(".modalReject").show();
    someFunction();
}

$(document.body).on("click", ".reject", myHandler);

Then, you can uninstall just that single event handler with .off() like this:

$(document.body).off("click", ".reject", myHandler);

FYI, .delegate() has been superceded by .on() since jQuery 1.7.

Awesome, thanks jfriend00. I gotta use delegate due to jQuery 1.5 and they don't want to upgrade yet. To remove delegate, I found out the equivalent of 'off' that is undelegate(). — a0z0ra, Sep 26 '13 at 16:54

Remove delegate event from a changed element

1 Answers1