Fonction jQuery après .append

Comment appeler une fonction une fois jQuery .appendterminé?

Voici un exemple:

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

Le problème: lorsqu'une structure DOM complexe est ajoutée, le calcul de la nouvelle taille de l'élément racine dans le rappel de la fonction d'ajout est erroné. Les hypothèses sont que le DOM n'est toujours pas complètement chargé, seul le premier enfant du DOM complexe ajouté l'est.

Vous avez de nombreuses réponses valides ici, mais aucune d'entre elles ne vous dit vraiment pourquoi cela fonctionne comme cela.

En JavaScript, les commandes sont exécutées une par une, de manière synchrone dans l'ordre dans lequel elles arrivent, à moins que vous ne leur disiez explicitement qu'elles sont asynchrones en utilisant un délai d'expiration ou un intervalle.

Cela signifie que votre .appendméthode sera exécutée et que rien d'autre (sans tenir compte des délais ou intervalles potentiels qui peuvent exister) ne s'exécutera jusqu'à ce que cette méthode ait terminé son travail.

Pour résumer, aucun rappel n'est nécessaire car .appendil sera exécuté de manière synchrone.

Eh bien, j'ai exactement le même problème avec le recalcul de la taille et après des heures de maux de tête, je ne suis pas d'accord avec un .append()comportement strictement synchrone. Eh bien au moins dans Google Chrome. Voir le code suivant.

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

La propriété padding-left est correctement récupérée dans Firefox mais elle est vide dans Chrome. Comme toutes les autres propriétés CSS, je suppose. Après quelques expériences, j'ai dû me contenter d'envelopper le `` getter '' CSS setTimeout()avec un délai de 10 ms, ce qui, je le sais, est laid comme l'enfer, mais le seul fonctionnant dans Chrome. Si l'un de vous avait une idée de la meilleure façon de résoudre ce problème, je vous serais très reconnaissant.

Bien que Marcus Ekwall ait tout à fait raison sur la synchronicité de l'ajout, j'ai également constaté que dans des situations étranges, le DOM n'est parfois pas complètement rendu par le navigateur lorsque la ligne de code suivante s'exécute.

Dans ce scénario, les solutions shadowdiver vont dans le bon sens - avec l'utilisation de .ready - mais il est beaucoup plus ordonné de chaîner l'appel à votre append d'origine.

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

Je suis surpris de toutes les réponses ici ...

Essaye ça:

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

Notez le délai d'expiration 0. Ce n'est pas un nombre arbitraire ... si je comprends bien (bien que ma compréhension puisse être un peu fragile), il y a deux files d'attente d'événements javascript - une pour les événements macro et une pour les micro événements. La file d'attente à portée "plus grande" contient les tâches qui mettent à jour l'interface utilisateur (et le DOM), tandis que la micro file d'attente effectue des opérations de type tâche rapide.

Sachez également que définir un délai d'expiration ne garantit pas que le code fonctionne exactement à cette valeur spécifiée. Cela place essentiellement la fonction dans la file d'attente supérieure (celle qui gère l'interface utilisateur / DOM) et ne l'exécute pas avant l'heure spécifiée.

Cela signifie que la définition d'un délai d'expiration de 0 le place dans la partie UI / DOM de la file d'attente d'événements de javascript, pour être exécuté à la prochaine occasion.

Cela signifie que le DOM est mis à jour avec tous les éléments de file d'attente précédents (tels que l'insertion via $.append(...); , et lorsque votre code s'exécute, le DOM est entièrement disponible.

(ps - j'ai appris cela de Secrects of the JavaScript Ninja - un excellent livre: https://www.manning.com/books/secrets-of-the-javascript-ninja )

J'ai une autre variante qui peut être utile pour quelqu'un:

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

Je suis tombé sur le même problème et j'ai trouvé une solution simple. Ajoutez après avoir appelé la fonction d'ajout un document prêt.

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

L'utilisation MutationObserverpeut agir comme un rappel pour la appendméthode jQuery :

Je l'ai expliqué dans une autre question , et cette fois je ne donnerai qu'un exemple pour les navigateurs modernes:

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

Je pense que c'est bien répondu mais c'est un peu plus spécifique à la gestion du "subChild_with_SIZE" (si cela vient du parent, mais vous pouvez l'adapter d'où il peut être)

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

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

la fonction jquery append renvoie un objet jQuery afin que vous puissiez simplement marquer une méthode à la fin

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

Pour les images et autres sources, vous pouvez utiliser cela:

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

Le moyen le plus propre est de le faire étape par étape. Utilisez chaque fonction pour parcourir chaque élément. Dès que cet élément est ajouté, passez-le à une fonction suivante pour traiter cet élément.

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

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

J'ai rencontré ce problème lors du codage HTML5 pour les appareils mobiles. Certaines combinaisons navigateur / périphérique ont provoqué des erreurs car la méthode .append () ne reflétait pas immédiatement les changements dans le DOM (provoquant l'échec du JS).

Par solution rapide et sale pour cette situation était:

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

Oui, vous pouvez ajouter une fonction de rappel à n'importe quelle insertion DOM:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Consultez la documentation de JQuery: http://api.jquery.com/append/
Et voici un exemple pratique similaire: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

J'ai récemment rencontré un problème similaire. La solution pour moi était de recréer la colletion. Laissez-moi essayer de démontrer:

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

J'espère que cela t'aides!

Dans jquery, vous pouvez utiliser juste après votre ajout

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

$ () appelle une fonction qui enregistre un rappel prêt pour le DOM (si une fonction lui est transmise) ou renvoie des éléments du DOM (si une chaîne de sélection ou un élément lui est passé)

Vous pouvez trouver plus ici la
différence entre $ et $ () dans jQuery
http://api.jquery.com/ready/

Je sais que ce n'est pas la meilleure solution, mais la meilleure pratique:

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

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

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

Append n'a pas de callback, et c'est du code qui s'exécute de manière synchrone - il n'y a aucun risque que cela ne soit PAS fait

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