adding jQuery click events to dynamically added content

Question

I have a table with multiple rows and columns populated by php and mySQL. For some of the td's I'm adding jQuery click-events in the document.ready function to let the user change the content.

But I also have an option for adding rows to the table and populating them manually. But since the rows I'm adding aren't there on the document ready, they won't get the click event handler appended, and so I'm not able to click them to get input boxes.

<table>
  <tr>
    <td class="clickable">Some info</td>
    <td class="clickable">Some more info</td>
    <td>Unchangable info</td>
  </tr>
  ... more similar rows ...
</table>

and then the jQuery

$("tr.clickable").click(function() {
   //add input fields
}

$("span#addNewRow").click(function() {
   $("table").append('<tr><td class="clickable"></td> ... </tr>')
}

Look at this answer http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Edmhs, May 04 '13 at 14:56

score 28 · Accepted Answer · edited Mar 31 '15 at 05:30

28

You want to use live events, which were introduced in 1.3.

$("tr.clickable").live("click", function() {
   //add input fields
});

$("span#addNewRow").live("click", function() {
   $("table").append('<tr><td class="clickable"></td> ... </tr>')
});

UPDATE: Note that as of jQuery 1.7, live() is deprecated. Use on() instead. And in some cases, delegate() may be a better choice. See the comments below.

Example of how to use .on():

$("table").on("click", "tr.clickable", function() {
   //add input fields
});

edited Mar 31 '15 at 05:30

Christian

19,605
3
54
70

answered May 12 '09 at 12:19

Plutor

2,867
2
25
29

2

I expect this was the best answer back in '09, but for anyone stumbling across this in more recent times, avoid using live. Use delegate() instead, as answered by Tauseef below. See http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ for details – Mala Feb 27 '12 at 08:26
Excellent, just what i needed. It adds event handlers even for newly added DOM elements. Im not sure how it looks regarding to performance but it works :) – Roboblob Feb 27 '12 at 10:35
1

Note that `live()` is now deprecated, but [trivial to replace](http://api.jquery.com/live/) with `on()`. – Tim Post Apr 06 '12 at 15:28

score 9 · Answer 2 · answered Sep 03 '11 at 17:11

9

You can use .delegate() function which attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

answered Sep 03 '11 at 17:11

Tauseef

91
1
1

although you're unlikely to get an accept 3 years down the road, thank you for your answer! – Mala Feb 27 '12 at 08:26

score 0 · Answer 3 · answered May 12 '09 at 12:19

0

Use the live event handler. It doesn't handle all events, but it does handle the click event. The handler will be bound to all current and future elements that match the selector.

$('tr.clickable').live( 'click', function() {
   ...
});

answered May 12 '09 at 12:19

tvanfosson

524,688
99
697
795

score 0 · Answer 4 · answered May 12 '09 at 12:20

You would have to add the event listeners after the elements are inserted.

If you are using JQuery you could use the jQuery library livequery which allows you to add events to elements that are not yet in the dom so that you dont have to rebind events when you insert something new into the dom.

adding jQuery click events to dynamically added content

4 Answers4

Linked

Related