Funzione jQuery dopo .append

Come chiamare una funzione dopo jQuery .append è stato completamente fatto?

Ecco un esempio:

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

Problema: quando viene aggiunta una struttura DOM complessa, il calcolo della nuova dimensione dell'elemento radice all'interno del callback della funzione di aggiunta è sbagliato. I presupposti sono che il DOM non è ancora completamente caricato, solo il primo figlio del DOM complesso aggiunto lo è.

Hai molte risposte valide qui, ma nessuna di esse ti dice davvero perché funziona come funziona.

In JavaScript i comandi vengono eseguiti uno alla volta, in modo sincrono nell'ordine in cui vengono, a meno che non si dica esplicitamente che siano asincroni utilizzando un timeout o un intervallo.

Ciò significa che il tuo .appendmetodo verrà eseguito e nient'altro (a prescindere da eventuali timeout o intervalli che potrebbero esistere) verrà eseguito fino a quando il metodo non avrà terminato il suo lavoro.

Per riassumere, non è necessario un callback poiché .appendverrà eseguito in modo sincrono.

Beh, ho esattamente lo stesso problema con il ricalcolo delle dimensioni e dopo ore di mal di testa devo essere in disaccordo con il .append()comportamento strettamente sincrono. Almeno in Google Chrome. Vedere il codice seguente.

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

La proprietà padding-left viene recuperata correttamente in Firefox ma è vuota in Chrome. Come tutte le altre proprietà CSS, suppongo. Dopo alcuni esperimenti ho dovuto accontentarmi di avvolgere il "getter" CSS setTimeout()con un ritardo di 10 ms che so essere BRUTTO da morire ma l'unico che funziona in Chrome. Se qualcuno di voi avesse un'idea di come risolvere meglio questo problema, sarei molto grato.

Sebbene Marcus Ekwall abbia assolutamente ragione sulla sincronicità di append, ho anche scoperto che in situazioni strane a volte il DOM non viene visualizzato completamente dal browser quando viene eseguita la riga di codice successiva.

In questo scenario, le soluzioni shadowdiver seguono le linee corrette, con l'utilizzo di .ready, tuttavia è molto più ordinato concatenare la chiamata all'append originale.

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

Sono sorpreso di tutte le risposte qui ...

Prova questo:

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

Notare il timeout 0. Non è un numero arbitrario ... a quanto ho capito (anche se la mia comprensione potrebbe essere un po 'traballante), ci sono due code di eventi javascript: una per gli eventi macro e una per i micro eventi. La coda con ambito "più grande" contiene attività che aggiornano l'interfaccia utente (e DOM), mentre la coda micro esegue operazioni di tipo attività rapida.

Renditi conto anche che l'impostazione di un timeout non garantisce che il codice funzioni esattamente al valore specificato. Ciò che fa è essenzialmente mette la funzione nella coda più alta (quella che gestisce l'interfaccia utente / DOM) e non la esegue prima del tempo specificato.

Ciò significa che l'impostazione di un timeout di 0 lo inserisce nella porzione UI / DOM della coda degli eventi di javascript, da eseguire alla prossima possibilità possibile.

Ciò significa che il DOM viene aggiornato con tutti gli elementi della coda precedenti (come quelli inseriti tramite $.append(...);, e quando il codice viene eseguito, il DOM è completamente disponibile.

(ps - l'ho imparato da Secrects of the JavaScript Ninja - un libro eccellente: https://www.manning.com/books/secrets-of-the-javascript-ninja )

Ho un'altra variante che può essere utile per qualcuno:

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

Mi sono imbattuto nello stesso problema e ho trovato una soluzione semplice. Aggiungi dopo aver chiamato la funzione di accodamento un documento pronto.

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

L'utilizzo MutationObserverpuò agire come un callback per il appendmetodo jQuery :

L'ho spiegato in un'altra domanda e questa volta darò solo un esempio per i browser moderni:

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

Penso che questa sia una buona risposta ma questo è un po 'più specifico per la gestione di "subChild_with_SIZE" (se proviene dal genitore, ma puoi adattarlo da dove potrebbe essere)

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

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

la funzione Jquery append restituisce un oggetto jQuery in modo da poter taggare semplicemente un metodo alla fine

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

Per le immagini e altre fonti puoi usare quello:

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

Il modo più pulito è farlo passo dopo passo. Usa una funzione each per scorrere ogni elemento. Non appena quell'elemento viene aggiunto, passalo a una funzione successiva per elaborare quell'elemento.

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

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

Ho riscontrato questo problema durante la codifica di HTML5 per dispositivi mobili. Alcune combinazioni browser / dispositivo hanno causato errori perché il metodo .append () non rifletteva immediatamente le modifiche nel DOM (causando il fallimento del JS).

Per soluzione rapida e sporca per questa situazione era:

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

Sì, puoi aggiungere una funzione di callback a qualsiasi inserimento DOM:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

controlla la documentazione di JQuery: http://api.jquery.com/append/
Ed ecco un esempio pratico e simile: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Di recente ho riscontrato un problema simile. La soluzione per me era ricreare la raccolta. Lasciami provare a dimostrare:

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

Spero che questo ti aiuti!

In jquery potresti usare subito dopo il tuo append

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

$ () chiama una funzione che registra un callback pronto per DOM (se le viene passata una funzione) o restituisce elementi dal DOM (se gli viene passata una stringa di selettore o un elemento)

Puoi trovare più qui la
differenza tra $ e $ () in jQuery
http://api.jquery.com/ready/

So che non è la soluzione migliore, ma la migliore pratica:

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

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

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

Append non ha callback e questo è codice che viene eseguito in modo sincrono - non c'è rischio che NON venga eseguito

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