Question

In an ASP.NET web page, I have a table that shows results from a database query. In the same page, I have a form that adds a row to the database as well as displays the row at the end of table. I used jQuery ajax to insert the record to the database and if it’s successful then I created a <tr> <td> ... </td> </tr> element and appended this element to the table using jQuery. This works fine. Now I want to make the table rows clickable. I tried it using
$('#table-name tr').click(function () {
alert ("hello");
});

Click function doesn’t work for the rows that I added using the form. Is there any workaround? How can I make all rows clickable?

Answer 1

$('#table-name tr') returns only the <tr> elements that exist when you call that selector. If you add new rows dynamically, they won’t be accounted for.

jQuery has special syntax to take care of dynamically generated elements:

$('#table-name').on('click', 'tr', function() {
    alert('Hello');
});