Memory leak with unused event handler in javascript

Question

I'm in a situation where I make a lot of ajax calls to change the same portion of html. This html represent a grid. After changing the html in the ajax call, I attach a event handler to an event of the grid. When the user click on a refresh button, I execute the same ajax call that set new html code and also add again an event handler to listen of event of the grid.

I want to know if each time I refresh my grid and add a new event handler if the previous event handler is still in memory and if yes, what are the bests practices in this situation? (e.g. unbind the event handler if exist before putting new html)

Here is an example of what I do:

$.get(this.config.actionLoggingUserListUrl, viewModel, function (data) {
    MyNamespace.ui.hideGridAnimation($("#LoggingActionUsersList"));

    if (data.success) {
        $("#validationSummary").html("");

        $("#usersList").html(data.result);

        $("#LoggingActionUsersList").click(function() {
            console.log("Here is my event handler attached multiple times!");
        });
    }
    else {
        $("#validationSummary").html(data.result);

        $("#usersList").html("");
    }
});

Note that the event handler I'm talking in this case is:

$("#LoggingActionUsersList").click(function() {
   console.log("Here is my event handler attached multiple times!");
});

You're definitely adding a new event handler to the ones that are already there each time that code runs. You can unbind with "unbind", or simply keep track of whether the handler's already bound. — Pointy
– Pointy, Commented Aug 23, 2012 at 16:37
jQuery .html() implicitly cleans out any (jQuery)-handlers and (jQuery)-data from the elements that are being replaced by .html(). So if this element you are attaching a handler to is being replaced by the above .html() calls then you don't need to explicitly detach it. — Esailija
– Esailija, Commented Aug 23, 2012 at 16:42

Phillip Schmidt · Accepted Answer · 2012-08-23 16:48:08Z

1

Event handlers stack, so yeah, this is a memork leak. Probably a fairly insignificant one, but its more the principle than the effect. Unless for some reason you really do need to have dynamic event handlers (something that is pretty rarely used as there aren't very many realistic uses for it), I'd strongly suggest pulling the event handler assignment out of the ajax call.

If you do need the event handler to change, the clever way to do it would be to make your event handler smart enough to know a little bit about the object to which it is assigned. That way, instead of adding a new event each time, you can just have logic in the event handler do different things based on the current identity of the object.

answered Aug 23, 2012 at 16:48

Phillip Schmidt

8,8283 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel Peltonen Over a year ago

This could work as well for clearing the stack and would be a simple change: $("#LoggingActionUsersList").unbind().click(...)

Chris Middleton Over a year ago

"As there aren't many realistic uses for it" Whenever you attach an event handler that takes arguments, you have to wrap arguments in a function, don't you? Is there a solution other than getting all the dynamic information from the this value?

epascarello · Accepted Answer · 2012-08-23 16:40:50Z

1

why are you binding it every time you make the call?

You are adding onto the stack every time. You are not replacing it. Best solution is to use on and do it once.

Other solution is to unbind the click event, before you add click event. The problem with this solution is if anything else added the click event, you just removed it.

answered Aug 23, 2012 at 16:40

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

Memory leak with unused event handler in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related