How to bind to javascript events after the DOM changes

Question

I have a function that binds to a tr tag to provide a mouseover effect like this:

$(".grid tr").bind("mouseenter", function () { $(this).addClass("hover"); }).bind("mouseleave", function () { $(this).removeClass("hover"); });

The problem is the grid is loaded via ajax when paging occurs, or filtering etc. This causes the grid to be completely replaced and all the event bindings to fail. Is there a way to bind to an event that automatically attaches to matching elements even when the DOM changes?

Thanks!

Answer 1

$.live is what you want:

$(".grid tr").live("mouseenter", function () { $(this).addClass("hover"); }).bind("mouseleave", function () { $(this).removeClass("hover"); });