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事件多個呼叫

回答

相關問題