追加后的 jQuery 回调

Question

我有以下代码:

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);      
}

我正在做的是循环访问 site 变量并使用 jQuery 的追加方法写出一些 div，这些 div 的 id 设置在“loadInTo”中，这工作得很好。完成此操作后，我想使用 jQuery 的 load 方法用其他页面的 HTML 填充 div。添加div后是否有回调？像这样的东西:

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

Answer 1

jQuery 不支持 .append 的回调。还有，很多more efficient立即 append 数据，而不是为每个元素调用 .append 。请参阅下面的代码。

每个要追加的元素都会添加到字符串中。字符串完成后，将添加标记，并 append HTML。然后，轮询器被激活，检查 DOM 中是否存在 marker 元素。如果存在，则清除轮询器，删除标记，然后执行代码。

更新:设置 ID 时使用 .substr(1)，因为 ID 不应以 # 为前缀。

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