追加后的jQuery回调 [英] jQuery callback after append

问题描述

我有以下的code：

HTML

 ＆LT; D​​IV ID =身体与GT;＆LT; / DIV＆GT;
 

JS

  VAR网站= {'pageData'：[
    {
        loadInTo'：'#aboutUs'，
        URL：aboutUs.html'，
        urlSection'：'.sectionInner
    }，
    {
        loadInTo'：'#whatWeDo'，
        URL：whatWeDo.html'，
        urlSection'：'.sectionInner
    }，
    {
        loadInTo'：'#ourValues​​'，
        URL：ourValues​​.html'，
        urlSection'：'.sectionInner
    }，
    {
        loadInTo'：'#ourExpertise'，
        URL：ourExpertise.html'，
        urlSection'：'.sectionInner
    }
]}对于（i = 0; I＆LT; site.pageData.length;我++）{
    VAR装载机= site.pageData [I]    $（'＃身体'）追加（'＆LT; D​​IV ID =+ loader.loadInTo +'级=部分/＆GT;'）;
    $（loader.loadInTo）.load（loader.url +''+ loader.urlSection）;
}
 

什么我做的是通过网站变量循环和使用具备ID集loadInTo'jQuery的append方法写出一些div的，这工作正常。上述过程完成后我想使用jQuery的load方法与其他网页的HTML来填充的div。有没有做一个回调追加div的后面？是这样的：

  $（'＃身体'）追加（'＆LT; D​​IV ID =+ loader.loadInTo +'级=部分/＆GT;'，函数（） {
        $（loader.loadInTo）.load（loader.url +''+ loader.urlSection）;
    }）;
 

解决方案

jQuery的不支持 .append 的回调。此外，它是很多更有效追加在一次数据，而不是调用 .append 的每个元素。请参阅下面的code。

的每一个元素到追加添加到字符串。一旦串完成后，标记添加，和HTML被追加。然后，轮询被激活，检查标记元素是否在DOM存在。如果它存在，轮询器清零，该标记被删除，并且code执行

更新： .substr（1）当ID设置时，因为ID不应该是由＃pfixed $ P $ 。

  VAR toAppend ='';
VAR markerID ='标记结束追加'+（新日）.getTime（）; //随机
对于（VAR I = 0; I＆LT; site.pageData.length;我++）{
    VAR装载机= site.pageData [I]
    toAppend + ='＆LT; D​​IV ID =+ loader.loadInTo.substr（1）+'级=部分/＆GT;';
}
toAppend + ='＆LT; D​​IV ID =+ markerID +'＆GT;＆LT; / DIV＆GT;';
$（'＃身体'）追加（toAppend）;
VAR轮询= window.setInterval（函数（）{
    VAR检测=的document.getElementById（markerID）;
    如果（检测）{// DOM是更有效
        window.clearInterval（轮询）;
        $（检测）一个.remove（）; //删除标记
        对于（VAR I = 0; I＆LT; site.pageData.length;我++）{
            VAR装载机= site.pageData [I]
            $（loader.loadInTo）.load（loader.url +''+ loader.urlSection）;
        }
    }
}，100）; //检查10倍每秒
 

I have the following code:

HTML

<div id="body"></div>

JS

var site = { 'pageData' : [
    {   
        'loadInTo'      :   '#aboutUs',
        'url'           :   'aboutUs.html',
        'urlSection'    :   '.sectionInner'
    },
    {   
        'loadInTo'      :   '#whatWeDo',
        'url'           :   'whatWeDo.html',
        'urlSection'    :   '.sectionInner' 
    },
    {   
        'loadInTo'      :   '#ourValues',
        'url'           :   'ourValues.html',
        'urlSection'    :   '.sectionInner' 
    },
    {   
        'loadInTo'      :   '#ourExpertise',
        'url'           :   'ourExpertise.html',
        'urlSection'    :   '.sectionInner' 
    }   
]}

for(i=0; i < site.pageData.length; i++) {
    var loader = site.pageData[i];

    $('#body').append('<div id="'+ loader.loadInTo +'" class="section" />');
    $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);      
}

What I am doing is looping through the site variable and writing out some div's using jQuery's append method that have the id set in 'loadInTo', this works fine. After this is complete I want to use jQuery's load method to populate the divs with HTML from other pages. Is there a to make a callback after appending the div's? something like this:

$('#body').append('<div id="'+ loader.loadInTo +'" class="section" />', function(){
        $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
    });

解决方案

jQuery doesn't support a callback for .append. Also, it's much more efficient to append the data at once, rather than calling .append for each element. See the code below.

Every element-to-append is added to a string. Once the string has finished, a marker is added, and the HTML is appended. Then, a poller is activated, checking whether the marker element exist in the DOM. If it exists, the poller is cleared, the marker is removed, and the code executes.

Update: .substr(1) is used when the ID is set, because the ID shouldn't be prefixed by #.

var toAppend = '';
var markerID = 'mark-end-of-append' + (new Date).getTime(); //Random
for(var i=0; i<site.pageData.length; i++) {
    var loader = site.pageData[i];
    toAppend += '<div id="'+ loader.loadInTo.substr(1) +'" class="section" />';
}
toAppend += '<div id="' + markerID + '"></div>';
$('#body').append(toAppend);
var poller = window.setInterval(function(){
    var detected = document.getElementById(markerID);
    if(detected){ //DOM is much more efficient
        window.clearInterval(poller);
        $(detected).remove(); //Remove marker
        for(var i=0; i<site.pageData.length; i++){
            var loader = site.pageData[i];
            $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
        }
    }
}, 100); //Check 10x per second

这篇关于追加后的jQuery回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！