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();
});

Updated Fiddle

Answer 2

每次加载内容时，都执行以下行：

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

将新的事件处理程序添加到事件处理程序列表中，以便在单击.load时执行。你执行你的功能三次，现在你有三个相同的处理程序，每次点击都会触发。

Answer 3

因为您正在调用该函数2次，请尝试：

$(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函数。重新定义单击时，它不会替换前一个单击，而是每次发生“单击”事件时将添加到堆栈中以执行。这适用于jQuery中的所有事件。

当您通过AJAX加载时，文档中的变量和事件仍然存在。这意味着您只需在每次运行ajax调用时执行的函数调用层之上添加图层

带有点击次数的jQuery load（）动态内容会在加载时多次触发

4 个答案:

Updated Fiddle