帶有點擊的jQuery load（）動態內容被加載次數被觸發

Question

我通過jQuery load（）加載內容，但是每次加載給定頁面時，頁面上的點擊都會被觸發多次。 為什么？？

此處的小提琴是： http : //jsfiddle.net/ZUZ3L/ph3tH/2/

Answer 1

只需將您的點擊處理結果放到load ：

$(document).ready(function() {
    function loadContent() {
        $(".ajaxContainer").load("http://fiddle.jshell.net/ #actions", function() {
            alert("Done");                
        });
    }

    $(".load").click(loadContent);
    loadContent();
});​

更新小提琴

Answer 2

每次加載內容時，都執行以下行：

$(".load").click(loadContent);

這會在事件處理程序列表中添加一個新的事件處理程序，以便在單擊.load執行。 您執行了三次函數，現在您有了三個相同的處理程序，每次單擊都會觸發這些處理程序。

Answer 3

因為您要調用該函數兩次，請嘗試以下操作：

$(document).ready(function() {
    function loadContent() {
        $(".ajaxContainer").load("http://fiddle.jshell.net/ #actions", function() {
            alert("Done");
        });
    }
    loadContent();
    $(".load").click(loadContent);

});

http://jsfiddle.net/ph3tH/4/

Answer 4

這是因為您要多次添加click事件。

每次運行代碼時，都會重新定義click函數。 重新定義單擊后，它不會替代上一個，而是每次“單擊”事件發生時，它將被添加到要執行的堆棧中。 這適用於jQuery中的所有事件。

通過AJAX加載時，文檔中的var和事件仍然保留。 這意味着您只是在每次運行ajax調用時要執行的函數調用之上添加一層