¿Cómo detectar la creación de un nuevo elemento en jQuery?

Digamos que tengo el siguiente código que devuelve el número de elementos de anclaje en una página:

function getLinkCount() { alert("Links:" + $("a").length); } 

Si llamo al documento listo, funcionará como se esperaba. Pero ¿y si ahora un nuevo enlace se inserta en una página de forma dinámica a través de JavaScript, ¿cómo puedo recibir una notificación para ejecutar la función de contador de enlaces de nuevo? (No tengo control sobre un script que podría crear un nuevo enlace).

Básicamente, estoy buscando algo similar a live() solo que sea un evento de creación de elementos, algo así como:

 $("a").live("create", getLinkCount); 

eso se dispararía cuando se crea un nuevo elemento.

Puede usar el .livequery() para esto, se ejecuta para cada elemento, incluidos los nuevos, como este:

 $("a").livequery(getLinkCount); 

Sin embargo, este complemento está desactualizado y no se recomienda para las versiones actuales de jQuery.

Sin embargo, suele ser más fácil hacer esto cuando creas los elementos, por ejemplo, si lo haces después de las solicitudes AJAX, el controlador .ajaxComplete() puede ser un buen lugar, por ejemplo:

 $(document).ajaxComplete(getLinkCount); 

Esto se ejecutará después de cada solicitud, y dado que normalmente crea elementos en su controlador de success , ya estarían presentes cuando se ejecute este controlador completo.

Podría usar el evento DOMSubtreeModified. Por ejemplo:

 $(document).bind('DOMSubtreeModified',function(){ console.log("now there are " + $('a').length + " links on this page."); }) 

Puede usar la biblioteca arrive.js que desarrollé para exactamente el mismo propósito (usa MutationObserver internamente). Uso:

 document.arrive('a', function(){ // 'this' refers to the newly created element var newElem = this; }); 

La respuesta aceptada es de 2010 y utiliza un complemento jQuery que ya no se mantiene activamente. La respuesta más alta con votaciones ascendentes sugiere usar DOMSubTreeModified que ahora está en desuso y ya no se debe usar.

Hoy, un MutationObserver es lo que debe usar para detectar cuando un elemento ha sido agregado al DOM. Los servidores de mutación ahora son ampliamente compatibles en todos los navegadores modernos (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, etc.).

Aquí hay un ejemplo simple de cómo puedes usar un MutationObserver para escuchar cuando se agrega un elemento al DOM.

Para abreviar, estoy usando la syntax de jQuery para construir el nodo e insertarlo en el DOM.

 var myElement = $("
hello world
")[0]; var observer = new MutationObserver(function(mutations) { if (document.contains(myElement)) { console.log("It's in the DOM!"); observer.disconnect(); } }); observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true}); $("body").append(myElement); // console.log: It's in the DOM!

El controlador de eventos del observer se activará siempre que se agregue o elimine cualquier nodo del document . Dentro del manejador, luego realizamos un control de contenido para determinar si myElement está ahora en el document .

No necesita iterar sobre cada registro de mutación almacenado en mutations porque puede realizar el document.contains . myElement verificación directamente sobre myElement .

Para mejorar el rendimiento, reemplace el document con el elemento específico que contendrá myElement en el DOM.