Función jQuery después de .append

¿Cómo llamar a una función después de que jQuery .appendesté completamente hecho?

He aquí un ejemplo:

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

El problema: cuando se agrega una estructura DOM compleja, el cálculo del nuevo tamaño del elemento raíz dentro de la devolución de llamada de la función de agregar es incorrecto. Se supone que el DOM aún no está completamente cargado, solo el primer hijo del DOM complejo agregado lo está.

Tiene muchas respuestas válidas aquí, pero ninguna de ellas realmente le dice por qué funciona como lo hace.

En JavaScript, los comandos se ejecutan uno a la vez, de forma sincrónica en el orden en que vienen, a menos que les indique explícitamente que sean asincrónicos mediante un tiempo de espera o un intervalo.

Esto significa que su .appendmétodo se ejecutará y nada más (sin tener en cuenta los posibles tiempos de espera o intervalos que puedan existir) se ejecutará hasta que ese método haya terminado su trabajo.

Para resumir, no hay necesidad de una devolución de llamada, ya .appendque se ejecutará de forma sincrónica.

Bueno, tengo exactamente el mismo problema con el recálculo del tamaño y después de horas de dolor de cabeza tengo que no estar de acuerdo con .append()comportarme estrictamente sincrónico. Bueno, al menos en Google Chrome. Consulte el siguiente código.

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

La propiedad padding-left se recupera correctamente en Firefox pero está vacía en Chrome. Como todas las demás propiedades de CSS, supongo. Después de algunos experimentos, tuve que conformarme con envolver el 'getter' de CSS setTimeout()con un retraso de 10 ms, que sé que es feo pero el único que funciona en Chrome. Si alguno de ustedes tuviera una idea de cómo resolver este problema de una mejor manera, estaría muy agradecido.

Aunque Marcus Ekwall tiene toda la razón sobre la sincronicidad de append, también he descubierto que en situaciones extrañas a veces el navegador no representa completamente el DOM cuando se ejecuta la siguiente línea de código.

En este escenario, las soluciones de shadowdiver siguen las líneas correctas, con el uso de .ready, sin embargo, es mucho más ordenado encadenar la llamada a su anexo original.

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

Me sorprenden todas las respuestas aquí ...

Prueba esto:

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

Tenga en cuenta el tiempo de espera 0. No es un número arbitrario ... según tengo entendido (aunque mi comprensión puede ser un poco inestable), hay dos colas de eventos de JavaScript: una para macroeventos y otra para microeventos. La cola de alcance "más grande" contiene tareas que actualizan la IU (y DOM), mientras que la micro cola realiza operaciones de tipo de tarea rápida.

También tenga en cuenta que establecer un tiempo de espera no garantiza que el código funcione exactamente en ese valor especificado. Lo que hace esto es esencialmente poner la función en la cola superior (la que maneja la interfaz de usuario / DOM) y no la ejecuta antes del tiempo especificado.

Esto significa que establecer un tiempo de espera de 0 lo coloca en la parte de UI / DOM de la cola de eventos de JavaScript, para que se ejecute en la próxima oportunidad posible.

Esto significa que el DOM se actualiza con todos los elementos de la cola anteriores (como los insertados a través de $.append(...);, y cuando se ejecuta su código, el DOM está completamente disponible.

(PD: aprendí esto de Secrects of the JavaScript Ninja , un excelente libro: https://www.manning.com/books/secrets-of-the-javascript-ninja )

Tengo otra variante que puede ser útil para alguien:

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

Me encontré con el mismo problema y encontré una solución simple. Agregue después de llamar a la función de agregar un documento listo.

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

El uso MutationObserverpuede actuar como una devolución de llamada para el appendmétodo jQuery :

Lo expliqué en otra pregunta , y esta vez solo daré un ejemplo 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>');

Creo que esto está bien respondido, pero esto es un poco más específico para manejar el "subChild_with_SIZE" (si viene del padre, pero puede adaptarlo desde donde puede estar)

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

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

la función de adición de Jquery devuelve un objeto jQuery para que pueda etiquetar un método al final

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

Para imágenes y otras fuentes, puede usar eso:

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

La forma más limpia es hacerlo paso a paso. Utilice una función de each para recorrer cada elemento. Tan pronto como se agregue ese elemento, páselo a una función posterior para procesar ese elemento.

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

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

Encontré este problema al codificar HTML5 para dispositivos móviles. Algunas combinaciones de navegador / dispositivo causaron errores porque el método .append () no reflejó los cambios en el DOM de inmediato (lo que provocó que JS fallara).

La solución rápida y sucia para esta situación fue:

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í, puede agregar una función de devolución de llamada a cualquier inserción DOM:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Consulte la documentación de JQuery: http://api.jquery.com/append/
Y aquí hay un ejemplo práctico similar: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Me encontré con un problema similar recientemente. La solución para mí fue volver a crear la colección. Déjame intentar demostrar:

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 esto ayude!

En jquery puede usar justo después de su adición

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

$ () llama a una función que registra una devolución de llamada lista para DOM (si se le pasa una función) o devuelve elementos del DOM (si se le pasa una cadena de selección o un elemento)

Puede encontrar más aquí la
diferencia entre $ y $ () en jQuery
http://api.jquery.com/ready/

Sé que no es la mejor solución, sino la mejor práctica:

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

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

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

Append no tiene devoluciones de llamada, y este es un código que se ejecuta sincrónicamente; no hay riesgo de que NO se realice

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