Question

Just wondering how is this managed from the memory point of view.

Let’s say I have this HTML page.

<div id="container">
    <div id="someID"></div>
<div>

and the following jQuery code:

$("#someID").click(function(){
    //do something
});

Now somewhere in my script I need to empty (clear) all the content in #container:

$("#container").empty();

Does this automatically remove/unbind the click event, or do I have to do it myself?

Is this something browser specific?

Answer 1

Yes, the .empty() method unbinds handlers, and clears all other data stored in jQuery.cache for all elements nested within #container.

jQuery only binds a single (generic) handler to an element. All other handlers and data are stored in jQuery.cache. The data for each element is cross-referenced by a serial number that jQuery puts directly on the DOM node.

So this is a jQuery specific system. The only browser specific concern is how jQuery binds the generic handler, and jQuery takes care of that unbinding as well.

---

From the docs:

“To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.”