追加后的 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，这些方法在“loadInTo”中设置了 id，这工作得很好。完成此操作后，我想使用 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 的回调。此外，附加效率更高立即获取数据，而不是为每个元素调用 .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

Answer 2

为什么要回调？ $(...).append() 是异步调用吗？ 我认为不是，那么为什么不再写一条语句呢？

如果您想要避免代码复制，您可以在临时变量中创建新的除法：

for( ... ) {
  var loader = ...;
  var newDiv = createDiv( {id:loader.loadInto } );
  $('#body').append( newDiv );
  $(newDiv).load( loader.url + ' ' + loader.urlSection );
}

createDiv 函数可能如下所示

function createDiv( settings ) {
  document.createElement('div');
  $(div).class("section");
  $(div).id(settings.id);
  return div;
}

Answer 3

在 jquery 中，您可以在附加内容代码之后使用 $() 。这样，您可以确保在对附加内容执行任何任务之前内容已加载并且 DOM 已准备好。

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$() 调用一个函数，该函数要么注册 DOM 就绪回调（如果将函数传递给它），要么从 DOM 返回元素（如果将选择器字符串或元素传递给它）

您可以在此处找到更多信息
jQuery 中 $ 和 $() 之间的区别

http://api.jquery.com/ready/