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

查看:26
本文介绍了追加后的jQuery回调的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下代码:

HTML

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 

我正在做的是遍历站点变量并使用 jQuery 的 append 方法写出一些 div,这些 id 设置在loadInTo"中,这很好用.完成后,我想使用 jQuery 的 load 方法用来自其他页面的 HTML 填充 div.附加div后是否有回调?像这样:

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

解决方案

jQuery 不支持 .append 的回调.此外,附加更有效一次获取数据,而不是为每个元素调用 .append.请参阅下面的代码.

每个要追加的元素都被添加到一个字符串中.字符串完成后,添加一个标记,并附加 HTML.然后,启动轮询器,检查 marker 元素是否存在于 DOM 中.如果存在,则清除轮询器,移除标记,然后执行代码.

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

var toAppend = '';var markerID = 'mark-end-of-append' + (new Date).getTime();//随机的for(var i=0; i';}toAppend += '<div id="' + markerID + '"></div>';$('#body').append(toAppend);var poller = window.setInterval(function(){检测到的 var = document.getElementById(markerID);if(detected){//DOM 效率更高window.clearInterval(poller);$(检测到).remove();//移除标记for(var i=0; i

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆