javascript - 在 AJAX 之后在 jQuery 中的表元素上松动事件处理程序

Question

我在表格内的不同 tr 元素上附加了一些 mouseenter 和 mouseleave 事件。搜索查询后，表格内的内容通过 AJAX 更新。

页面不重新加载，表格内容(或其“tr”元素通过 AJAX 更新而无需重新加载页面。)

这似乎会使事件处理程序无响应。他们停止添加和删除我想要的类(class)。如果我手动将代码放入浏览器控制台并按回车键。浏览器再次开始添加/删除这些类以响应事件处理程序。

谁能建议我如何确保所有 tr 元素在 AJAX 更新后仍在监听事件？

我最初使用以下代码:

$(".track-table tbody tr").on("mouseenter", function(e) {
  $(this).addClass("currently-active");
});

$(".track-table tbody tr").on("mouseleave", function(e) {
  $(this).removeClass("currently-active");
});

在意识到 jQuery 监听这些事件的 td 元素消失后，我开始使用事件委托(delegate)。

$("table").on("mouseenter", ".track-table tbody tr", function(e) {
   $(this).addClass("currently-active");
});

$("table").on("mouseleave", ".track-table tbody tr", function(e) {
   $(this).removeClass("currently-active");
});

但是，事件仍然没有被捕获。我尝试在 submit 事件中运行事件处理程序:

$("form").on("submit", function(e) {
   $(".track-table tbody tr").on("mouseenter", function(e) {
     $(this).addClass("currently-active");
   });

   $(".track-table tbody tr").on("mouseleave", function(e) {
     $(this).removeClass("currently-active");
    });
});

我的问题是，如何在 AJAX 更新文档后让事件监听器保持“事件”状态。

Answer 1

使用事件委托(delegate) .on() 但将其附加到 body 而不是:

$("body").on("mouseenter", ".track-table tbody tr", function(e) {
    $(this).addClass("currently-active");
});

$("body").on("mouseleave", ".track-table tbody tr", function(e) {
    $(this).removeClass("currently-active");
});