jQuery listener doesn't "listen" to events on DOM elements dynamically created

Question

I have a listener like this:

$('.delete').click(function() {
  ...some stuff
});

Also, on the same page, another script dynamically add elements to the DOM in this way:

$('#list').append('<tr><td><a class="delete" href="#">delete</a></td></tr>');

My problem is that the listener doesn't "listen" to these dynamically created elements.

Can anyone shed some light please?

score 15 · Accepted Answer · edited Mar 11 '13 at 02:06

15

It will listen only on elements that existed when you bound the event handler. If you want it to listen to dynamically created elements you want to use the live() function, which works with current and future elements.

EDIT: as of jQuery 1.7, the recommended way is to use the .on() function, which replaces .bind(), .live() and .delegate() by providing all functionality required for attaching event handlers.

edited Mar 11 '13 at 02:06

Luca

9,259
5
46
59

answered Mar 17 '10 at 15:22

axel_c

6,557
2
28
41

2

Thanks. In my case I had to add the event to my document element like this: `$(document).on('click','.mybutton', function() { //handler });` – gerrytan Aug 28 '13 at 06:54

score 4 · Answer 2 · edited Jun 25 '13 at 09:37

Binding events to an element that doesn't yet exist is impossible. The way you can achieve this, as Yogurt the wise expressed, is using 'on' and specifying the selector you wish to use as the second parameter of the function.

this.$someStaticParent.on('click', 'li', functionName);

What this does, is tells the parent element to hold an event for click. Whenever its clicked, it'll check to see WHERE the event came from, if it matches parameter two, it fires an event. This is called event delegation. You are allowing the parent to accept events then firing the events upon a succesful comparison. This is a common design pattern.

score 1 · Answer 3 · answered Mar 23 '10 at 15:32

Yes, check out the JQuery Live function. Also remember to bind and unbind events. had issues where the link kept getting bound everytime it was created, but since the page was not reloading the link would have 5 or 6 click events tied to it, and was causing issues. just had to unbind events to the link.

score 0 · Answer 4 · answered Mar 17 '10 at 15:23

Sure.

The dynamic listener is not dynamic.

$('.delete').click(function() {

hooks up a listener to all existing elements.

When you add another element, you need to rerun that to make sure the new elements get the same handler hooked up.

Basically, the new elements dont get listened to because you dont attach new handlers to them ;)

jQuery listener doesn't "listen" to events on DOM elements dynamically created

4 Answers4

Linked