Question

我有一个HTML页面，它使用jQuery .load（）从其他文件中提取HTML。我这样做主要是出于可读性目的。

我遇到了一个问题，即通过.load（）加载的代码不是＆＃34;可见＆＃34;之后在模块中加载的其他javascript因为.load（）是异步的。通过在.load（）回调中执行.click（）绑定，在我的另一个StackOverflow问题中解决了这个问题，结果非常好。所以。像往常一样闪耀！

现在，我还有另一个问题也是相关的。

HTML：

        <div class="mainContent" style="color:white; overflow-y: auto; position:fixed; top:210px; bottom:60px;">
            <div class="linkContent" id="contentAboutUs"        style="display:none"></div>
            <div class="linkContent" id="contentAboutUsCompany" style="display:none"></div>
            <div class="linkContent" id="contentAboutUsVerify"  style="display:none"></div>
            <div class="linkContent" id="contentAboutUsSelf"    style="display:none"></div>
            <div class="linkContent" id="contentAboutUsHow"     style="display:none"></div>
        </div>

jQuery ready（）函数：

$("#contentAboutUs").load("contentAboutUs.html");
$("#contentAboutUsCompany").load("contentAboutUsCompany.html");
$("#contentAboutUsVerify").load("contentAboutUsVerify.html");
$("#contentAboutUsSelf").load("contentAboutUsSelf.html", function () { $(".saveButton").click(function () { saveForm(); })  });
$("#contentAboutUsHow").load("contentAboutUsHow.html");

你会注意到在AboutUsSelf .load（）上，一个回调绑定了＆＃34; .saveButton＆＃34;的点击事件。到一个名为saveForm（）的函数。这很完美，这是我从我以前的S.O.得到的答案。问题

如你所见，＆＃34; .saveButton＆＃34;是一个类，实际上，这个按钮将在表单的多个页面上;这就是为什么它是一个类而不是一个ID。

问题是：我不想对包含其中一个按钮的每个部分执行click（）绑定。有没有办法动态地.load（）这个HTML，然后全局应用这个click（）绑定，而不是在每个需要它的情况下单独在.load（）回调中执行它？

Answer 1

由于您将这些内容加载到容器中，因此可以使用它。

$('.mainContent').on('click','.saveButton', function(){
     saveForm();
});

以这种方式绑定的事件处理程序绑定到容器，它“查找”按钮的选择器。你不能直接绑定到按钮的类，因为它没有任何东西可以绑定，直到它被加载到DOM中。

绑定到最近的容器（例如，不是文档），可以避免使用超大DOM来深入“查看”内容。

请注意，您在此处遇到的一件事是您的服务器有多次点击 - 即如果HTML已经在页面中，您将从HTML的缓存中受益，并且只有这样才能点击页面。话虽这么说，动态页面部分是容器级别此类型绑定的良好候选。

以ASP.NET MVC为例，这些可以放在部分视图中，并在点击浏览器之前进入页面。

您没有问，但我也会将样式移到CSS文件而不是将其放入标记中 - 这样可以使您的标记更清晰，更容易修改。

Answer 2

我相信你要找的是event delegation。

基本上，您可以做的是使用on()将事件侦听器绑定到包含元素，而不是直接绑定到您正在侦听的元素上。相关信息：

如果我们点击新添加的项目，则不会发生任何事情。这是因为我们之前附加的直接绑定事件处理程序。直接事件仅在调用.on（）方法时附加到元素。在这种情况下，由于调用.on（）时我们的新锚不存在，因此它不会获得事件处理程序。

示例：

$("#container-of-some-sort").on("click", ".saveButton", function(){ 
    saveForm(); 
});

Answer 3

查看ajaxComplete - 应该能够在那里附加您的点击事件，并将其应用于

中加载的所有新按钮

有没有办法对通过jQuery .load（）加载的动态HTML进行全局事件绑定？

3 个答案: