Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery cleaning up eventhandlers

I'm an actionscript developer getting into jquery/javascript development. I have a question regarding event handlers and binding/unbinding.

Say for instance that I have for an div with a img element with an onerror event handler in it. If i replace that that div with a new one do i need to remove the eventhandler bound to the img element. Since the img no longer will be in the document will browsers be smart enough to remove it or will I have a caused memory leak?

Comming from actionscript i usually try to constantly remove old eventhandlers. So do i need to do this when writing javascript for web browsers?

The event handlers are added with $('imgElement').error(errorFunction);

like image 493
Tjelle Avatar asked Aug 12 '10 12:08

Tjelle


People also ask

How do you delete a click event?

The removeEventListener() is an inbuilt function in JavaScript which removes an event handler from an element for a attached event. for example, if a button is disabled after one click you can use removeEventListener() to remove a click event listener.

Which function is used to remove an existing event handler?

The removeEventListener() method removes an event handler from an element.

What is off event in jQuery?

The off() method is most often used to remove event handlers attached with the on() method. As of jQuery version 1.7, the off() method is the new replacement for the unbind(), die() and undelegate() methods.

How do I get rid of event handlers in jQuery?

How to Remove an Event Handler in jQuery. Answer: Use the jQuery off() Method. You can simply use the jQuery off() method to remove the event handlers that were attached with on(). Don't use the unbind() method, it has been deprecated since jQuery 3.0.

What are the jQuery methods used to handle events?

The following table lists all the jQuery methods used to handle events. Deprecated in version 3.0. Use the on () method instead. Attaches event handlers to elements Deprecated in version 3.0. Use the on () method instead. Attaches a handler to current, or future, specified child elements of the matching elements

How do I respond to an event in jQuery?

jQuery provides a method .on () to respond to any event on the selected elements. This is called an event binding. Although .on () isn't the only method provided for event binding, it is a best practice to use this for jQuery 1.7+. To learn more, read more about the evolution of event binding in jQuery.

What is click event in jQuery?

This event is already explained in the jQuery Syntax chapter. The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. The following example says: When a click event fires on a <p> element; hide the current <p> element:


1 Answers

If you're binding the events with jQuery just call .remove() on the old element before replacing it, or .empty() if you just want to clear it, both of these clean up event handlers for the element and it's children, or in the case of .empty(), just the children.

If you just replace it, e.g. .html(content) you will leak memory, as any handlers or data for those elements will be left on the $.cache object.

like image 111
Nick Craver Avatar answered Oct 12 '22 03:10

Nick Craver