Extensión de Chrome: ¿se activa un evento cuando se crea un elemento?

Question

Me gustaría disparar un evento cuando se agrega un elemento al documento. He leído JQuery documentation for on() y list of events, pero ninguno de los eventos parece referirse a la creación de elementos.

I debe monitorear el DOM como yo no controlo cuando se añade el elemento al documento (como mi Javascript es un script contenido en la extensión de Chrome)

Answer 1

Sé que esta es una pregunta antigua, que ya tiene una respuesta, pero dado que las cosas han cambiado, pensé que agregaría una respuesta actualizada para las personas que aterricen en esta página en busca de una respuesta.

DOM Mutation Events han quedado en desuso. De acuerdo con MDN (con respecto DOM Mutation Events):

DEPRECATED
Esta característica se ha quitado de la web. Aunque algunos navegadores aún pueden soportarlo, está en proceso de descarte. No lo use en proyectos antiguos o nuevos. Las páginas o aplicaciones web que lo usan pueden romperse en cualquier momento.

uno debe utilizar el nuevo MutationObserver API, que también es más eficiente.
(La biblioteca mutation-summary proporciona ahora un inteface útil a este nuevo API.) Uso

Ejemplo:

/* Create an observer instance */ 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation.type); 
    }); 
}); 

/* Config info for the observer */ 
var config = { 
    "childList": true, 
    "subtree": true 
}; 

/* Observe the body and its (descendants) for "childList" changes */ 
observer.observe(document.body, config); 

/* Stop the observer, when it is not required any more */ 
observer.disconnect(); 

Answer 2

Para la opción más sencilla, es posible que desee examinar LiveQuery que es efectivamente el "oyente DOM" que buscas. Sin embargo, debe usarse con precaución, ya que tiene el potencial de ser bastante pesado, en cuanto a rendimiento.

Si prefiere 'enrollar el suyo' - con .on() debería funcionar para todos los elementos actuales y futuros, pero los elementos agregados deberían coincidir con el selector. Por ejemplo, si conecta un evento a todas las clases de .myClass y luego inyectó un nuevo elemento de la misma clase al DOM, el evento debería dispararse. Efectivamente, los roll up de .on() bind/live/delegate de versiones anteriores de jQuery, los últimos dos funcionan contra elementos DOM actuales y futuros.

Answer 3

Como complemento de la respuesta de @ SpaceBison, puede crear sus propios eventos cuando cree estos elementos. Por ejemplo:

function create_element() { 
    // Create an element 
    $('body').append("<p>Testing..</p>") 
    // Trigger 
    $('body').trigger('elementCreated'); 
} 
function monitor_elements() { 
    $("body").on("elementCreated", function(event){ 
    alert('One more'); 
    }); 
} 

$(document).ready(function(){ 

    monitor_elements(); 

    for (var i=0; i < 3; i++) { 
     create_element(); 
    } 

}); 

ejemplo vivo: http://jsfiddle.net/9NsAh/

Pero, por supuesto, es sólo es útil cuando se crea sus propios elementos.

Answer 4

Como mencioné, no estoy creando mis propios elementos, por lo que disparar un evento cuando creo el elemento no es una opción.

La mejor solución para esto es Mutation Observer API, para la cual el Mutation Summary proporciona una interfaz amigable.