Find solution
How to bind an event to appended element in jQuery?

jQuery event binding to table rows with rowid ...how better to address this?

  • I have dynamic html table to which rows are added and deleted, on row selection ... say  click event ...say reflected by highlighting the row in a different color I note that  , the event is not bind to the newly added rows ...and the code for the jquery row event binding handler needs to be re-evaluated ...rebound ... I tried defining a anonymous code block bound/ reffered by a variable or  stored in a variable and  calling eval on the  variable ...it didn't work inspite  of the variable being global ...in multiple code blocks ... I also tried storing the code block in HTML  input  element and calling eval in multiple code blocks it didn't work ... any ideas , suggestions on better handling the scenario ...appreciated ??

  • Answer:

    I am not 100% sure what you are struggling with here but this sentence "I note that  , the event is not bind to the newly added rows" is leading me to believe that you are binding your event wrong. Try this: $('#table-name').on('click', 'tr', function() { alert('clicked!'); }); A full example <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <a href="#" id="add">Add some row</a> <table id="table-name" style="width:100%; border:1px solid #ccc; margin-top:10px;"> <tr> <td>Patrick</td> <td>Lustig</td> </tr> <tr> <td>Paul</td> <td>Walner</td> </tr> <tr> <td>Peter</td> <td>Schneider</td> </tr> </table> <script type="text/javascript"> $('#add').click(function(e) { $('#table-name').append('<tr><td>Ray</td><td>Smith</td></tr>'); }); $('#table-name').on('click', 'tr', function() { alert('clicked!'); }); </script> </body> </html>

Bjoern Zinssmeister at Quora Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.