Question

我有一个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中，您能告诉我吗？

感谢。

Answer 1

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

Answer 2

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

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

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

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

另一种选择是显式使用延迟对象。特此检查总是，完成和失败。 Documentation here.

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

2 个答案: