make table rows clickable using jQuery

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?

Blender · Accepted Answer · 2012-11-19 00:49:56Z

4

$('#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');
});

answered Nov 19, 2012 at 0:49

Blender

300k55 gold badges462 silver badges511 bronze badges

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

Comments

Jim S. · Accepted Answer · 2012-11-19 00:51:25Z

1

Use jquery on instead of click. The problem is that click events are only attached when the page loads.

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

Jquery on method waits for events to propagate up from child elements.

answered Nov 19, 2012 at 0:51

Jim S.

1,1701 gold badge9 silver badges13 bronze badges

Comments

Travis J · Accepted Answer · 2012-11-19 01:01:33Z

1

The reason that the click event does not work for those elements is that the event handler was issued only once, before the elements existed on the DOM.

In order to have the click event exist for elements which are added in the future as well, you should use on, this will allow the handler to be assigned to the dynamically added elements. Make sure to include the 'tr' which will create a delegate function to handle the event for future elements.

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

Another option would be to assign the click event to the element before you dynamically add it to the page.

success: function(results){
 var newRow = document.createElement("tr");
 //manipulate newRow with results
 $(newRow).click(function(){ alert("hello") });
 //append newRow
}

edited Nov 19, 2012 at 1:01

answered Nov 19, 2012 at 0:48

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

6 Comments

Blender Over a year ago

.on('click') and .click() do the same thing.

Travis J Over a year ago

@Blender - on will allow future elements to have the click event, whereas click will not. Note that your answer uses on as well.

Blender Over a year ago

Not really. .on() isn't a drop-in replacement for .live(). Take a look here: jsfiddle.net/MU4X4

Roko C. Buljan Over a year ago

Travis... There's a big difference on using .on and .on :D eg: $(element).on('click',function(){ = .bind() while $(parent).on('click','el',function(){ = deprecated .live() so, take a closer look at the DOCS, "nice info out there find you will". (Yoda)

Travis J Over a year ago

@Blender - good point, you were right. On needs an extra argument in order to produce the event for future elements.

|

Collectives™ on Stack Overflow

make table rows clickable using jQuery

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related