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

I have a DIV that is getting its content on success of an ajax data load call:

我有一个DIV,它正在获取ajax数据加载调用成功的内容:

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

Within the newly loaded content, there are objects. Therefore, I cannot instantiate those objects when the page originally loads, since they don't yet exist. Therefore, I instantiate them on ajax success:

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

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

This works fine. However, I'm wondering if this is good practice. First of all, every time a user triggers the function to load the DIV, I assume that all of that content needs to get added over and over again to the browser's object model. As well, all of those jQuery instantiation calls need to get run over and over again.

这很好用。但是,我想知道这是不是很好的做法。首先,每次用户触发加载DIV的功能时,我都认为所有这些内容都需要一遍又一遍地添加到浏览器的对象模型中。同样,所有这些jQuery实例化调用都需要反复运行。

Can you let me know if this is best practice, and if there is a better way of loading content into the DIV?

如果这是最佳实践,并且有更好的方法将内容加载到DIV中,您能告诉我吗?

thanks.

2 个解决方案

#1

This is the only way I know of to instantiate widgets on dynamically-added elements, unless a particular widget library provides something better. Event handlers can be bound earlier using delegation with .on(), but widgets normally require access to the element at instantiation time (they often modify the DOM as part of their initialization).

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

#2

The concept is fine, but there are cleaner ways. For one, you can clean up your existing code by simply consolidating the success into a single function and breaking it out of the .ajax block.

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

I think what you are really looking for is .ajaxComplete() which has recently been updated with jQuery 1.8. It will fire when ANY ajax request completes, but you can pass data that you can use to differentiate between which ajax request fires which code inside the .ajaxComplete. Quoted from docs, "the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request" can all be passed into the .ajaxComplete handler.

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

An example of putting this method to use (also from docs):

使用此方法的示例(也来自docs):

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

Another option is the explicit use of deferred objects. Check out always, done, and fail especially. Documentation here.

另一种选择是显式使用延迟对象。特此检查总是,完成和失败。文档在这里。

#1

#2