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 (
This problem is incredibly common, and we’ve all fallen for this at least once.
I’ll explain the theory behind it in the “Discussion” section. If you feel you need to understand this well before heading to the solutions, check Why do event handlers get lost ? first.
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