jQuery-Funktion nach .append

Wie rufe ich eine Funktion auf, nachdem jQuery .appendvollständig abgeschlossen ist?

Hier ist ein Beispiel:

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

Das Problem: Wenn eine komplexe DOM-Struktur angehängt wird, ist die Berechnung der neuen Größe des Stammelements innerhalb des Rückrufs der Anhängefunktion falsch. Es wird davon ausgegangen, dass das DOM noch nicht vollständig geladen ist, sondern nur das erste untergeordnete Element des hinzugefügten komplexen DOM.

Sie haben hier viele gültige Antworten, aber keine davon sagt Ihnen wirklich, warum es so funktioniert.

In JavaScript werden Befehle einzeln synchron in der Reihenfolge ausgeführt, in der sie kommen, es sei denn, Sie weisen sie ausdrücklich an, mithilfe eines Timeouts oder Intervalls asynchron zu sein.

Dies bedeutet, dass Ihre .appendMethode ausgeführt wird und nichts anderes (ohne Berücksichtigung möglicher Zeitüberschreitungen oder Intervalle) ausgeführt wird, bis diese Methode ihren Job beendet hat.

Zusammenfassend ist kein Rückruf erforderlich, da er .appendsynchron ausgeführt wird.

Nun, ich habe genau das gleiche Problem mit der Größenberechnung und nach stundenlangen Kopfschmerzen muss ich nicht damit einverstanden sein, mich .append()streng synchron zu verhalten. Na zumindest in Google Chrome. Siehe folgenden Code.

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

Die Eigenschaft padding-left wird in Firefox korrekt abgerufen, ist jedoch in Chrome leer. Wie alle anderen CSS-Eigenschaften nehme ich an. Nach einigen Experimenten musste ich setTimeout()mich damit zufrieden geben, den CSS-Getter mit einer Verzögerung von 10 ms einzupacken, von der ich weiß, dass sie höllisch hässlich ist, aber die einzige, die in Chrome funktioniert. Wenn einer von Ihnen eine Idee hätte, wie man dieses Problem besser lösen könnte, wäre ich sehr dankbar.

Obwohl Marcus Ekwall in Bezug auf die Synchronität des Anhängens absolut Recht hat, habe ich auch festgestellt, dass in seltsamen Situationen das DOM manchmal nicht vollständig vom Browser gerendert wird, wenn die nächste Codezeile ausgeführt wird.

In diesem Szenario sind die Shadowdiver-Lösungen - mit .ready - in der richtigen Richtung. Es ist jedoch viel aufgeräumter, den Aufruf an Ihren ursprünglichen Anhang zu ketten.

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

Ich bin überrascht über alle Antworten hier ...

Versuche dies:

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

Beachten Sie das 0-Timeout. Es ist keine willkürliche Zahl ... wie ich verstehe (obwohl mein Verständnis etwas wackelig sein mag), gibt es zwei Javascript-Ereigniswarteschlangen - eine für Makroereignisse und eine für Mikroereignisse. Die Warteschlange mit "größerem" Gültigkeitsbereich enthält Aufgaben, die die Benutzeroberfläche (und das DOM) aktualisieren, während die Mikrowarteschlange Operationen vom Typ "Schnelle Aufgaben" ausführt.

Beachten Sie auch, dass das Festlegen eines Zeitlimits nicht garantiert, dass der Code genau den angegebenen Wert aufweist. Dadurch wird die Funktion im Wesentlichen in die höhere Warteschlange (die die Benutzeroberfläche / das DOM verwaltet) gestellt und nicht vor der angegebenen Zeit ausgeführt.

Dies bedeutet, dass durch das Festlegen eines Zeitlimits von 0 es in den UI / DOM-Teil der Ereigniswarteschlange von Javascript verschoben wird, um bei der nächstmöglichen Gelegenheit ausgeführt zu werden.

Dies bedeutet, dass das DOM mit allen vorherigen Warteschlangenelementen (z. B. eingefügt über) aktualisiert wird $.append(...); , und wenn Ihr Code ausgeführt wird, ist das DOM vollständig verfügbar.

(ps - Ich habe dies von Secrects of the JavaScript Ninja gelernt - ein ausgezeichnetes Buch: https://www.manning.com/books/secrets-of-the-javascript-ninja )

Ich habe eine andere Variante, die für jemanden nützlich sein kann:

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

Ich bin auf dasselbe Problem gestoßen und habe eine einfache Lösung gefunden. Fügen Sie nach dem Aufrufen der Append-Funktion ein bereites Dokument hinzu.

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

Die Verwendung MutationObserverkann wie ein Rückruf für die jQuery- appendMethode wirken:

Ich habe es in einer anderen Frage erklärt , und dieses Mal werde ich nur ein Beispiel für moderne Browser geben:

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

Ich denke, dies ist gut beantwortet, aber dies ist etwas spezifischer für die Behandlung von "subChild_with_SIZE" (wenn dies vom übergeordneten Element kommt, aber Sie können es von dort aus anpassen, wo es sich befindet).

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

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

Die Jquery-Append-Funktion gibt ein jQuery-Objekt zurück, sodass Sie am Ende einfach eine Methode markieren können

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

Für Bilder und andere Quellen können Sie Folgendes verwenden:

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

Am saubersten ist es, es Schritt für Schritt zu tun. Verwenden Sie jede Funktion, um durch jedes Element zu iterieren. Sobald dieses Element angehängt ist, übergeben Sie es an eine nachfolgende Funktion, um dieses Element zu verarbeiten.

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

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

Dieses Problem ist beim Codieren von HTML5 für mobile Geräte aufgetreten. Einige Browser- / Gerätekombinationen verursachten Fehler, da die Methode .append () die Änderungen im DOM nicht sofort widerspiegelte (was dazu führte, dass der JS fehlschlug).

Eine schnelle und schmutzige Lösung für diese Situation war:

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

Ja, Sie können jeder DOM-Einfügung eine Rückruffunktion hinzufügen :
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Überprüfen Sie die JQuery-Dokumentation: http://api.jquery.com/append/
Und hier ist ein praktisches, ähnliches Beispiel: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Ich bin kürzlich auf ein ähnliches Problem gestoßen. Die Lösung für mich war, die Sammlung neu zu erstellen. Lassen Sie mich versuchen zu demonstrieren:

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

Hoffe das hilft!

In jquery können Sie direkt nach dem Anhängen verwenden

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

$ () ruft eine Funktion auf, die entweder einen DOM-fähigen Rückruf registriert (wenn eine Funktion an sie übergeben wird) oder Elemente aus dem DOM zurückgibt (wenn eine Auswahlzeichenfolge oder ein Element an sie übergeben wird).

Weitere
Unterschiede zwischen $ und $ () finden Sie hier in jQuery
http://api.jquery.com/ready/

Ich weiß, dass es nicht die beste Lösung ist, aber die beste Vorgehensweise:

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

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

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

Anhängen hat keine Rückrufe, und dies ist Code, der synchron ausgeführt wird - es besteht kein Risiko, dass er NICHT ausgeführt wird

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