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>')
}

Great question. Fit my problem almost exactly!

user172632
– user172632

2010-11-03 21:27:40 +00:00
Commented Nov 3, 2010 at 21:27 — user172632
– user172632, Commented Nov 3, 2010 at 21:27
Look at this answer stackoverflow.com/questions/1359018/…

Edmhs
– Edmhs

2013-05-04 14:56:35 +00:00
Commented May 4, 2013 at 14:56 — Edmhs
– Edmhs, Commented May 4, 2013 at 14:56

Christian · Accepted Answer · 2015-03-31 05:30:51Z

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, 2015 at 5:30

Christian

19.8k3 gold badges57 silver badges70 bronze badges

answered May 12, 2009 at 12:19

Plutor

2,9073 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mala Over a year ago

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 alfajango.com/blog/… for details

Roboblob Over a year ago

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 :)

user50049 Over a year ago

Note that live() is now deprecated, but trivial to replace with on().

Tauseef · Accepted Answer · 2011-09-03 17:11:10Z

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 3, 2011 at 17:11

Tauseef

911 silver badge1 bronze badge

1 Comment

Mala Over a year ago

although you're unlikely to get an accept 3 years down the road, thank you for your answer!

tvanfosson · Accepted Answer · 2009-05-12 12:19:34Z

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, 2009 at 12:19

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

Rigobert Song · Accepted Answer · 2009-05-12 12:20:40Z

0

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.

answered May 12, 2009 at 12:20

Rigobert Song

2,8122 gold badges31 silver badges49 bronze badges

Collectives™ on Stack Overflow

adding jQuery click events to dynamically added content

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related