You’ve bound one or more event handlers, and they suddenly stop working. It happens after new elements are added dynamically by an Ajax request or simple jQuery operations (append(), wrap(), etc.).
There are two possible solutions for this recurring problem, each with its own pros and cons:
This approach requires you to call bind() again and again, every time new elements are added.It’s pretty easy to implement and doesn’t require any plugin or new method.You can simply have all the bindings in a function and call it again after each update.
It relies on event bubbling.‡ This is fast and light but requires a little understanding and can be (just) a little tricky at times.
Since jQuery 1.3, there’s built-in support for event delegation. Using it is as simple as using the new live() method instead of bind().
Why do event handlers get lost ?
When you add a piece of code like this:
this is what you’re “doing”:
Look for all elements with a CSS class “clickable” and save it to the collection.
Bind the “handler” function to the click event of each element in the collection.
Each time an element with CSS class clickable is clicked, run the function handler.
A little introduction to event delegation
Event delegation consists of binding once, at the start, and passively listening for events to be triggered. It relies on the fact that many events in the browser bubble up.
As an example, after you click a <div>, its parent node receives the click event as well, and then it passes to the parent’s parent and so on, until it reaches the document element.
Pros and cons of each approach
Rebinding is simple: you just re-add the event handlers. It leads to new problems, such as adding event handlers to elements that were already bound. Some add CSS classes to work around this problem (marking those bound with a certain class).
All this requires CPU cycles every time the elements are updated and requires more and more event handlers to be created.
One way to work around both problems mentioned is to use named functions as event handlers. If you always use the same function, then you’ve solved the duplication problem, and the overhead is smaller.
Still, rebinding can lead to higher and higher amounts of RAM taken as time passes by.
Event delegation just requires an initial binding and there’s no need to deal with rebinding at all. This is quite a relief for the developer and makes the code shorter and clearer. The RAM problem mentioned before doesn’t apply to event delegation.
The content of the page might change, but the active event handlers are always the same.
Event delegation has a catch, though. In order for it to work, the code that handles it (live(), a plugin or your own code) must take the element that got the event
(event.target) and go through its ancestors to see which ones have event handlers totrigger along with some more processing. This means that, while event delegation requiresless binding, it requires more processing each time an event is triggered.
Also, event delegation cannot be used with events that don’t bubble, such as focus and blur. For these events, there’s a workaround that works cross-browser, using the focus in and focus out events in some browsers.
Event delegation seems like a nicer approach, but it requires extra processing.
My advice on this matter is to use live bindings just when you really need them. These are two common situations:
You have a list of DOM elements that changes dynamically.
Event delegation can work faster when you bind one live binding instead of, say,
100 from the regular ones. This is faster at the start and takes less memory.
If there’s no reason to use live(), then just go for bind(). If you then need to make it live, switching should be just a matter of seconds.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.