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

Question

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

我遇到了一个问题，即由于.load（）是异步的，因此通过.load（）加载的代码对于以后在模块中加载的其他javascript不“可见”。 通过在.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（）上，回调将“ .saveButton”的click事件绑定到名为saveForm（）的函数。 这非常有效，这是我从上一个SO问题得到的答案。

如您所见，“。saveButton”是一个类，实际上，此按钮将在表单的许多页面上； 这就是为什么它是类而不是ID的原因。

然后的问题是：我不想在包含这些按钮之一的每个部分上执行click（）绑定。 有没有一种方法可以动态地对该HTML进行.load（），然后全局应用此click（）绑定，而不是在每种需要的情况下单独在.load（）回调中单独进行处理？

Answer 1

由于您是将它们加载到容器中，因此可以使用它。

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

用这种方式绑定的事件处理程序绑定到容器，并且它在“内部”寻找按钮的选择器。 您无法直接绑定到该按钮的类，因为在将其加载到DOM中之前，没有任何可绑定的类。

绑定到最近的容器（例如，不是文档），您可以避免使用超大型DOM产生深层的“内部查看”影响。

请注意，您在这里还遇到的一件事是服务器多次命中-即，如果HTML缓存已经存在于页面中，并且仅以这种方式命中一次，您将从中受益。 就是说，动态页面部分是在容器级别进行此类型绑定的很好的候选者。

例如，使用ASP.NET MVC，可以将它们放在部分视图中，并在进入浏览器之前进入页面。

您没有要求，但是我也将样式移动到CSS文件中，而不是将其放入标记中-这样可以使标记更整洁，更容易修改。

Answer 2

看看ajaxComplete-应该能够在其中附加click事件并将其应用于加载的所有新按钮

Answer 3

我相信您正在寻找的是事件委托 。

本质上，您可以做的是使用on（）将事件监听器绑定到一个包含元素，而不是直接在您正在监听的元素上。 相关信息：

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

例：

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