Have Geek Brain

How to bind javascript events after DOM changes

I have a function that binds to a tag tag to provide a hover 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 or filtering occurs, etc. This results in a complete replacement of the mesh and snapping failures. Is there a way to bind to an event that automatically attaches to the appropriate elements even when the DOM changes?

Thanks!

+2


a source to share


3 answers


$.live

- Is this what you want:



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


a source


Please use .on()

from now on as it is .live()

deprecated in jQuery as it is inefficient.



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


a source


Alternatively, you can use $.delegate

More info: What is the best practice to bind jQuery click event to every anchor tag in every row of the table.

0


a source






More articles:


All Articles