Função jQuery após .append

Como chamar uma função depois que o jQuery .appendestiver completamente pronto?

Aqui está um exemplo:

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

O problema: quando uma estrutura DOM complexa é anexada, o cálculo do novo tamanho do elemento raiz no retorno de chamada da função anexa está errado. As suposições são de que o DOM ainda não está completamente carregado, apenas o primeiro filho do DOM complexo adicionado.

Você tem muitas respostas válidas aqui, mas nenhuma delas realmente diz por que funciona dessa maneira.

Em JavaScript, os comandos são executados um de cada vez, de forma síncrona na ordem em que vêm, a menos que você diga explicitamente que sejam assíncronos usando um tempo limite ou intervalo.

Isso significa que seu .appendmétodo será executado e nada mais (desconsiderando quaisquer tempos limite ou intervalos potenciais que possam existir) será executado até que o método termine seu trabalho.

Para resumir, não há necessidade de um retorno de chamada, pois .appendserá executado de forma síncrona.

Bem, eu tenho exatamente o mesmo problema com o recálculo do tamanho e depois de horas de dor de cabeça, tenho que discordar do .append()comportamento estritamente síncrono. Bem, pelo menos no Google Chrome. Veja o código a seguir.

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

A propriedade padding-left foi recuperada corretamente no Firefox, mas está vazia no Chrome. Como todas as outras propriedades CSS, suponho. Depois de alguns experimentos, tive que me contentar em envolver o 'getter' CSS em um setTimeout()atraso de 10 ms, o que eu sei que é FEIO pra caramba, mas o único funcionando no Chrome. Se algum de vocês tiver uma ideia de como resolver esse problema da melhor maneira, eu ficaria muito grato.

Embora Marcus Ekwall esteja absolutamente certo sobre a sincronicidade do acréscimo, também descobri que, em situações estranhas, às vezes o DOM não é completamente renderizado pelo navegador quando a próxima linha de código é executada.

Nesse cenário, as soluções de shadowdiver seguem as linhas corretas - com o uso de .ready - no entanto, é muito mais organizado encadear a chamada para seu anexo original.

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

Estou surpreso com todas as respostas aqui ...

Experimente isto:

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

Observe o 0 tempo limite. Não é um número arbitrário ... como eu entendo (embora meu entendimento possa ser um pouco instável), há duas filas de eventos javascript - uma para eventos macro e outra para microeventos. A fila com escopo "maior" contém tarefas que atualizam a IU (e DOM), enquanto a micro fila executa operações do tipo tarefa rápida.

Observe também que definir um tempo limite não garante que o código seja executado exatamente no valor especificado. O que isso faz é essencialmente colocar a função na fila superior (aquela que lida com a UI / DOM) e não a executa antes do tempo especificado.

Isso significa que definir um tempo limite de 0 o coloca na parte da IU / DOM da fila de eventos do javascript, para ser executado na próxima chance possível.

Isso significa que o DOM é atualizado com todos os itens anteriores da fila (como inserido via $.append(...);e, quando o código é executado, o DOM está totalmente disponível.

(ps - Aprendi isso em Secrects of the JavaScript Ninja - um excelente livro: https://www.manning.com/books/secrets-of-the-javascript-ninja )

Tenho outra variante que pode ser útil para alguém:

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

Encontrei o mesmo problema e encontrei uma solução simples. Depois de chamar a função append, adicione um documento pronto.

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

O uso MutationObserverpode funcionar como um retorno de chamada para o appendmétodo jQuery :

Eu expliquei isso em outra pergunta e, desta vez, darei apenas exemplos para navegadores modernos:

// 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>');

Acho que está bem respondido, mas é um pouco mais específico para lidar com o "subChild_with_SIZE" (se vier do pai, mas você pode adaptá-lo de onde possa estar)

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

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

a função anexar Jquery retorna um objeto jQuery para que você possa apenas marcar um método no final

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

Para imagens e outras fontes, você pode usar:

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

A maneira mais limpa é fazê-lo passo a passo. Use uma função each para iterar em cada elemento. Assim que esse elemento for anexado, passe-o para uma função subsequente para processar esse elemento.

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

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

Encontrei esse problema ao codificar HTML5 para dispositivos móveis. Algumas combinações de navegador / dispositivo causaram erros porque o método .append () não refletiu as alterações no DOM imediatamente (causando a falha do JS).

A solução rápida e suja para esta situação foi:

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

Sim, você pode adicionar uma função de retorno de chamada a qualquer inserção de DOM:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Verifique a documentação do JQuery: http://api.jquery.com/append/
E aqui está um exemplo prático e semelhante: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Eu tive um problema semelhante recentemente. A solução para mim foi recriar a coleção. Deixe-me tentar demonstrar:

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

Espero que isto ajude!

No jquery você pode usar logo após o seu append

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

$ () chama uma função que registra um retorno de chamada pronto para DOM (se uma função for passada para ele) ou retorna elementos do DOM (se uma string de seletor ou elemento for passado para ele)

Você pode encontrar mais aqui a
diferença entre $ e $ () em jQuery
http://api.jquery.com/ready/

Eu sei que não é a melhor solução, mas a melhor prática:

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

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

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

Append não tem retornos de chamada, e este é um código executado de forma síncrona - não há risco de NÃO ser feito

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