Javascript事件多个呼叫

我第一次遇到一个很奇怪的问题。我正在开发一个网站，其中包含许多ajax调用（我的ajax调用加载html表格，窗口小部件，navbar等..），在一些ajax响应中，我包含了加载内容使用的特定JavaScript（fold/unfold tbody for example）。Javascript事件多个呼叫

例如，在我的表，我包括以下码：

$(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

来源

2015-02-10 laurent.lefevre

貌似这个脚本是在你的Ajax回调，将其移动到您的文档准备回调 – 2015-02-10 07:34:06

是的，你可以使用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)，因为jQuery将不得不寻找比整个文档每次您的AJAX通话完成并重新绑定事件。当你使用例如$('table.myDynamicTable').on(...)时，它只需要查看表格内的DOM，它将运行得更快。

来源

2015-02-10 07:38:27

它的工作原理！使用$（'table.myDynamicTable'）。on（...）不适用于我，因为'table.myDynamicTable'是由ajax加载的，唯一的办法是使用更大的作用域（document或身体），我说得对吗？ – 2015-02-10 07:53:23

不知道你的代码。但是你的表格会被附加到一个dom元素（例如div）？然后添加一个id到这个div并使用它来代替文档。 – 2015-02-10 07:57:13

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

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

来源

2015-02-10 07:45:32 hiddeneyes02

Javascript事件多个呼叫

回答

相关问题