jquery issue, onmouse over event not working on new row

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 开发者_Python百科dynamically added row, mouse over function works in all rows except this new one.

Please help me to sortout this issue

Thank you

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() { ... });

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