Javascript 事件多次调用

Question

我第一次遇到一个非常奇怪的问题。我正在开发一个带有许多ajax调用的网站(我的ajax调用加载html表格，小部件，导航栏等)，在一些ajax响应上我包含加载内容使用的特定javascript(例如折叠/展开tbody)。

例如，在我的 table 上，我包含以下代码:

$(document).on("click",".foldandunfold i", function (e) {
    $(this).toggleClass("fa-chevron-right");
    $(this).toggleClass("fa-chevron-down");
    $(this).parents("tbody:first").find("tr:not(:first)").toggle();
}); 

当发送第二个ajax调用时，返回其他内容(使用相同的javascript)我的jquery事件运行两次，如果我加载另一个表，它运行三次等等......

将 javascript 移动到我网站的下部解决了该问题(因为它只加载了 1 次，但我动态生成了特定于小部件的 javascript(使用 php)，我无法将其移到 ajax 响应之外。

我可以告诉 jquery 或 JIT javascript 编译器清理这个事件或类似的事情吗？

对不起我的英语:x

Answer 1

是的，您可以使用 off() 删除元素上的所有事件:Documentation .

$(document).off().on("click",".foldandunfold i", function (e) {
        $(this).toggleClass("fa-chevron-right");
        $(this).toggleClass("fa-chevron-down");
        $(this).parents("tbody:first").find("tr:not(:first)").toggle();
    });

您还可以仅针对所需的事件或元素删除它:

$(document).off("click",".foldandunfold i");

顺便说一句:考虑采用 $(document) 之外的另一个元素，因为每次 AJAX 调用完成时 jQuery 都必须查看整个文档然后您重新绑定(bind)该事件。例如，当您使用 $('table.myDynamicTable').on(...) 时，它只需查找表内的 DOM，并且运行速度会更快。