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

Question

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 en el documento listo que iba a funcionar como se espera. 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 yo estoy buscando algo similar a live() sólo eso estaría mirando evento de creación elemento, algo así como:

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

que activaría cuando se crea un nuevo elemento.

Answer 1

Puede utilizar el .livequery() plugin para esto, se ejecuta para cada elemento, incluyendo otros nuevos, como este:

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

Sin embargo, este plugin es fuera de fecha y no se recomienda para las versiones actuales de jQuery.

Por lo general es más fácil hacer esto cuando crea los elementos de que, por ejemplo, si está haciendo después de peticiones AJAX, la .ajaxComplete() handler puede ser un buen lugar, por ejemplo:

$(document).ajaxComplete(getLinkCount); 

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

Answer 2

Puede usar el evento DOMSubtreeModified. Por ejemplo:

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

Answer 3

Usted puede usar la biblioteca arrive.js que he desarrollado para el exacto el mismo propósito (que utiliza internamente MutationObserver). Uso:

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