javascript - 带有点击的 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

因为您要调用该函数 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 调用时执行的函数调用层之上添加层