JQuery обратный вызов после добавления - PullRequest
Новая
       21

JQuery обратный вызов после добавления

1 голос
/ 23 октября 2011

У меня есть следующий код:

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

То, что я делаю, это перебираю переменную сайта и выписываю некоторые divиспользуя метод добавления jQuery с идентификатором, установленным в 'loadInTo', это работает отлично.После того, как это будет завершено, я хочу использовать метод загрузки jQuery, чтобы заполнить div с HTML с других страниц.Можно ли сделать обратный звонок после добавления div?как то так: 

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

Ответы [ 3 ]

3 голосов
/ 23 октября 2011

jQuery не поддерживает обратный вызов для .append. Кроме того, гораздо эффективнее добавлять данные сразу, чем вызывать .append для каждого элемента. Смотрите код ниже.

Каждый добавляемый элемент добавляется в строку. После завершения строки добавляется маркер и добавляется HTML-код. Затем активируется опросщик, проверяющий, существует ли элемент marker в DOM. Если он существует, очиститель очищается, маркер удаляется и код выполняется.

Обновление: .substr(1) используется, когда ID установлен, потому что 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
1 голос
/ 23 октября 2011

Почему звонок?$(...).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;
}
0 голосов
/ 13 сентября 2018

В jquery вы можете использовать $ () сразу после добавления кода содержимого.Таким образом, вы можете быть уверены, что контент загружен и DOM готов, прежде чем выполнять какие-либо задачи с добавленным контентом. 

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

$ () вызывает функцию, которая регистрирует обратный вызов DOM-ready (еслифункция передается ему) или возвращает элементы из DOM (если строка селектора или элемент передаются ей)

Здесь вы можете найти больше
разницы между $ и $ () вjQuery
http://api.jquery.com/ready/

...