1

我有一个 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 中？

谢谢。

4

2 回答 2

0

这个概念很好，但有更清洁的方法。一方面，您可以通过简单地将成功合并到一个函数中并将其从 .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 );
    }
});

另一种选择是显式使用延迟对象。总是检查，完成，尤其是失败。文档在这里。

于 2013-05-14T00:04:59.270 回答
0

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

于 2013-05-13T23:44:42.473 回答