带有点击的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调用时要执行的函数调用之上添加一层