jquery issue, onmouse over event not working on new row

Question

hi,all

I have an html table with a few rows, I have included a jquery function as

$('tr').mouseover(function() {
  $(this).addClass('row_over');
});

so that on mouse over the css class of that particular row changes. then I have added one more row using jquery, but the mouse over function doesn't work on the dynamically added row, mouse over function works in all rows except this new one.

Please help me to sortout this issue

Thank you

Answer 1

Instead of using .mouseover, you need to use .live

$('tr').live('mouseover', function() {
  $(this).addClass('row_over');
});

However be careful using the .live() method has there's a performance hit for using it.

If you can, when adding the new row, try binding a new mouseover to that row dynamically:

row = addNewRow();
row.mouseover(function() { ... });

Answer 2

Use the .live event to bind to elements created after page load.