Comment lier des événements javascript après les modifications du DOM - javascript, jquery, effect

J'ai une fonction qui se lie à une balise tr pour fournir un effet de survol de la souris comme celui-ci:

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

Le problème est que la grille est chargée via ajax lorsquela pagination se produit, le filtrage, etc. Cela provoque le remplacement complet de la grille et l'échec de toutes les liaisons d'événements. Existe-t-il un moyen de se lier à un événement qui s'attache automatiquement aux éléments correspondants même lorsque le DOM change?

Merci!

Réponses:

$.live c'est ce que tu veux:

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

Veuillez utiliser .on() à partir de maintenant, comme .live() est obsolète dans jQuery car il est inefficace.

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

Alternativement, vous pouvez utiliser $.delegate

Plus d'informations: Quelle est la meilleure pratique pour lier l'événement click jQuery à chaque balise d'ancrage sur chaque ligne d'une table