通过 Ajax 将动态内容加载到 DIV答案

【问题标题】：Loading dynamic content into a DIV via Ajax通过 Ajax 将动态内容加载到 DIV
【发布时间】：2013-05-08 02:37:17
【问题描述】：

我有一个 DIV，它在 ajax 数据加载调用成功时获取其内容：

  $.ajax({
    type: 'POST',
    url: '/load.php',
    success: function(msg) { 
            document.getElementById('DIV').innerHTML = msg;
    ...

在新加载的内容中，有对象。因此，我无法在页面最初加载时实例化这些对象，因为它们还不存在。因此，我在 ajax 成功时实例化它们：

  $.ajax({
    type: 'POST',
    url: '/load.php',
    success: function(msg) { 
            document.getElementById('DIV').innerHTML = msg;
            $("#button").button();
            $("#dp").datepicker();
            etc.
    }

这很好用。但是，我想知道这是否是一种好习惯。首先，每次用户触发加载 DIV 的函数时，我假设所有这些内容都需要一遍又一遍地添加到浏览器的对象模型中。同样，所有这些 jQuery 实例化调用都需要一遍又一遍地运行。

您能否告诉我这是否是最佳做法，以及是否有更好的方式将内容加载到 DIV 中？

谢谢。

【问题讨论】：

标签： jquery ajax html dynamic

【解决方案1】：

这是我所知道的在动态添加的元素上实例化小部件的唯一方法，除非特定的小部件库提供了更好的东西。事件处理程序可以使用.on() 的委托更早地绑定，但小部件通常需要在实例化时访问元素（它们经常修改 DOM 作为其初始化的一部分）。

【讨论】：

【解决方案2】：

这个概念很好，但有更简洁的方法。一方面，您可以通过简单地将成功合并到一个函数中并将其从 .ajax 块中分离出来来清理现有代码。

我认为您真正需要的是.ajaxComplete()，它最近已使用 jQuery 1.8 进行了更新。它会在任何 ajax 请求完成时触发，但您可以传递可用于区分 .ajaxComplete 中哪个 ajax 请求触发哪个代码的数据。引用自文档，“事件对象、XMLHttpRequest 对象和用于创建请求的设置对象”都可以传递到 .ajaxComplete 处理程序中。

使用此方法的示例（也来自文档）：

$(document).ajaxComplete(function(event, xhr, settings) {
    if ( settings.url === "ajax/test.html" ) {
        $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
            xhr.responseHTML );
    }
});

另一个选项是显式使用延迟对象。总是检查，完成，尤其是失败。 Documentation here.

【讨论】：