Функція jQuery після .append

Як викликати функцію після .appendзавершення jQuery ?

Ось приклад:

$("#root").append(child, function(){
   // Action after append is completly done
});

Проблема: Коли додається складна структура DOM, обчислення нового розміру кореневого елемента в зворотному виклику функції додавання є неправильним. Припущення полягають у тому, що DOM все ще не повністю завантажений, є лише перша дочірня частина доданого складного DOM.

Тут ви маєте багато дійсних відповідей, але жодна з них насправді не говорить вам, чому це працює так, як працює.

У JavaScript команди виконуються по черзі синхронно в тому порядку, в якому вони надходять, якщо ви явно не наказали їм бути асинхронними, використовуючи час очікування або інтервал.

Це означає, що ваш .appendметод буде виконаний, і ніщо інше (не враховуючи будь-які потенційні тайм-аути чи інтервали, які можуть існувати) не буде виконуватися, поки цей метод не закінчить свою роботу.

Підводячи підсумок, немає необхідності у зворотному дзвінку, оскільки .appendвін буде виконуватися синхронно.

Хоча Маркус Екволл абсолютно правий щодо синхронності додавання, я також виявив, що в дивних ситуаціях іноді DOM не повністю відображається браузером при запуску наступного рядка коду.

У цьому сценарії рішення для тіньових дайверів відповідають правильним правилам - із використанням .ready - однак набагато акуратніше прив'язувати виклик до вашого початкового додатка.

$('#root')
  .append(html)
  .ready(function () {
    // enter code here
  });

Ну, у мене точно така ж проблема з перерахунком розміру, і через кілька годин головного болю я повинен не погодитися з .append()поведінкою суворо синхронно. Ну принаймні в Google Chrome. Див. Наступний код.

var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );

Властивість padding-left правильно отримана у Firefox, але в Chrome вона порожня. Як і всі інші властивості CSS, я припускаю. Після деяких експериментів мені довелося погодитися на обгортання CSS `` геттера '' setTimeout()із затримкою 10 мс, що, на мою думку, ПОРТНЕ, але єдине, що працює в Chrome. Якби хтось із вас мав ідею, як краще вирішити цю проблему, я був би дуже вдячний.

Я дивуюсь на всі відповіді тут ...

Спробуйте це:

window.setTimeout(function() { /* your stuff */ }, 0);

Зверніть увагу на тайм-аут 0. Це не довільне число ... наскільки я розумію (хоча моє розуміння може бути дещо хитким), є дві черги подій javascript - одна для макро подій та одна для мікро подій. У "більшій" області дії входить область завдань, які оновлюють інтерфейс користувача (і DOM), тоді як мікрочерга виконує операції типу швидкого завдання.

Також розумійте, що встановлення тайм-ауту не гарантує, що код працює точно за вказаним значенням. Це робить, по суті, поміщає функцію у вищу чергу (ту, яка обробляє UI / DOM), і не запускає її до зазначеного часу.

Це означає, що встановлення тайм-ауту 0 поміщає його в UI / DOM-частину черги подій javascript, яка запускатиметься з наступним можливим шансом.

Це означає, що DOM оновлюється з усіма попередніми елементами черги (наприклад, вставленими через $.append(...);, і коли ваш код працює, DOM є повністю доступним.

(ps - я дізнався про це з Secrets of JavaScript Ninja - відмінна книга: https://www.manning.com/books/secrets-of-the-javascript-ninja )

У мене є ще один варіант, який може бути корисним для когось:

$('<img src="http://example.com/someresource.jpg">').load(function() {
    $('#login').submit();
}).appendTo("body");

Я зіткнувся з тією ж проблемою і знайшов просте рішення. Додайте після виклику функції додавання документ, готовий.

$("#root").append(child);
$(document).ready(function () {
    // Action after append is completly done
});

Використання MutationObserverможе діяти як зворотний виклик для jQueryappend методу :

Я пояснив це в іншому питанні , і цього разу я наведу лише приклад для сучасних браузерів:

// Somewhere in your app:
var observeDOM = (() => {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback(mutations);
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });

            return obs;
        }
    }
})();

//////////////////
// Your code:

// setup the DOM observer (on the appended content's parent) before appending anything
observeDOM( document.body, ()=>{
    // something was added/removed
}).disconnect(); // don't listen to any more changes

// append something
$('body').append('<p>foo</p>');

Я думаю, що на це добре відповіли, але це трохи більш специфічно для обробки "subChild_with_SIZE" (якщо це надходить від батьків, але ви можете адаптувати його там, де це може бути)

$("#root").append(
    $('<div />',{
        'id': 'child'
    })
)
.children()
.last()
.each(function() {
    $(this).append(
        $('<div />',{
            'id': $(this).parent().width()
        })
    );
});

$.when($('#root').append(child)).then(anotherMethod());

функція додавання Jquery повертає об'єкт jQuery, щоб ви могли просто позначити метод на кінці

$("#root").append(child).anotherJqueryMethod();

Для зображень та інших джерел ви можете використовувати:

$(el).one('load', function(){
    // completed
}).each(function() {
    if (this.complete)
        $(this).load();
});

Найчистіший спосіб - це робити поетапно. Використовуйте кожен функціонал для перебору кожного елемента. Як тільки цей елемент додається, передайте його наступній функції для обробки цього елемента.

    function processAppended(el){
        //process appended element
    }

    var remove = '<a href="#">remove</a>' ;
    $('li').each(function(){
        $(this).append(remove);   
        processAppended(this);    
    });​

Я зіткнувся з цією проблемою під час кодування HTML5 для мобільних пристроїв. Деякі комбінації браузера та пристрою спричинили помилки, оскільки метод .append () не відображав зміни в DOM негайно (спричиняючи збій JS).

Швидким і брудним рішенням цієї ситуації було:

var appint = setInterval(function(){
    if ( $('#foobar').length > 0 ) {
        //now you can be sure append is ready
        //$('#foobar').remove(); if elem is just for checking
        //clearInterval(appint)
    }
}, 100);
$(body).append('<div>...</div><div id="foobar"></div>');

Так, ви можете додати функцію зворотного виклику до будь-якої вставки DOM:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Перевірте документацію JQuery: http://api.jquery.com/append/
І ось практичний, подібний приклад: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Нещодавно я зіткнувся з подібною проблемою. Рішенням для мене було відтворити колекцію. Дозвольте спробувати продемонструвати:

var $element = $(selector);
$element.append(content);

// This Doesn't work, because $element still contains old structure:
$element.fooBar();    

// This should work: the collection is re-created with the new content:
$(selector).fooBar();

Сподіваюся, це допомагає!

У jquery ви можете використовувати одразу після додавання

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

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

Більше тут ви знайдете
різницю між $ та $ () у jQuery
http://api.jquery.com/ready/

Я знаю, що це не найкраще рішення, але найкраща практика:

$("#root").append(child);

setTimeout(function(){
  // Action after append
},100);

$('#root').append(child);
// do your work here

У Append немає зворотних викликів, і це код, який виконується синхронно - немає ризику, що це НЕ буде зроблено

$('#root').append(child).anotherMethod();