DOM改变后如何绑定javascript事件

Question

我有一个绑定到 tr 标签的函数，以提供如下所示的鼠标悬停效果：

$(".grid tr").bind("mouseenter", 功能 （） { $(this).addClass("悬停"); }).bind("mouseleave", 函数 () { $(this).removeClass("悬停"); });

问题是当分页或过滤等发生时，网格是通过ajax加载的。这会导致网格被完全替换并且所有事件绑定失败。有没有一种方法可以绑定到一个事件，即使 DOM 发生变化，该事件也会自动附加到匹配的元素？

谢谢！

Answer 1

$.live 是你想要的：

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

Answer 2

从现在开始，请使用 .on()，因为 .live() 在 jQuery 中已被弃用，因为它效率低下。

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

Answer 3

或者，您可以使用 $.delegate

更多信息：什么是将 jQuery 单击事件绑定到表格每一行上的每个锚标记的最佳实践