Question

我第一次遇到一个非常奇怪的问题。我开发了一个包含许多ajax调用的网站（我的ajax调用加载html表，小部件，导航栏等等），在一些ajax响应中我包含加载内容使用的特定javascript（例如fold /展开tbody）。

例如，在我的桌子上，我包含以下代码：

$(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移动到我网站的下半部分解决了这个问题（因为它只加载了一次，但我动态生成了javascript（使用php），这是特定于widget的，我无法移动它在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-Call完成并重新绑定事件时，jQuery就必须查看整个文档。当您使用例如$('table.myDynamicTable').on(...)时，它只需要查找表中的DOM，它将运行得更快。

Answer 2

尝试将e.stopPropagation();添加到处理程序的末尾。

http://api.jquery.com/event.stoppropagation/

Javascript事件多次调用

2 个答案: