Chrome Extension: attiva un evento quando viene creato l'elemento?

Question

Vorrei attivare un evento quando un elemento viene aggiunto al documento. Ho letto lo JQuery documentation for on() e lo list of events ma nessuno degli eventi sembra riguardare la creazione di elementi.

ho deve monitorare il DOM come io non controllo quando l'elemento viene aggiunto al documento (come il mio Javascript è un contenuto scritto Chrome Extension)

Answer 1

So che questa è una vecchia domanda, che ha già una risposta, ma poiché le cose sono cambiate, ho pensato di aggiungere una risposta aggiornata per le persone che arrivano in questa pagina alla ricerca di una risposta.

Il DOM Mutation Events sono stati deprecati. Secondo MDN (per quanto riguarda DOM Mutation Events):

deprecato
Questa caratteristica è stata rimossa dal Web. Sebbene alcuni browser possano ancora supportarlo, è in fase di rilascio. Non usarlo in progetti vecchi o nuovi. Le pagine o le app Web che lo utilizzano potrebbero interrompersi in qualsiasi momento.

si dovrebbe usare il nuovo MutationObserver API, che è anche più efficiente.
(La libreria mutation-summary ora fornisce un inteface utile a questa nuova API.) Utilizzo

Esempio:

/* 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

Per l'opzione più semplice, si potrebbe desiderare di esaminare LiveQuery che è effettivamente il "listener del DOM" che stai cercando. Dovrebbe comunque essere usato con cautela, in quanto ha il potenziale per essere abbastanza pesante, in termini di prestazioni.

Se preferisci "rotolare il tuo" - con .on() lo dovrebbe funzionare per tutti gli elementi attuali e futuri, ma gli elementi aggiunti dovranno corrispondere al selettore. Ad esempio, se si collega un evento a tutte le classi di .myClass e successivamente si immette un nuovo elemento della stessa classe nel DOM, l'evento dovrebbe essere attivato. In effetti, l'API .on() ritorna in bind/live/delegate dalle precedenti versioni di jQuery, le ultime due delle quali funzionano contro gli elementi DOM attuali e futuri.

Answer 3

Come complemento della risposta di @ SpaceBison, è possibile creare i propri eventi quando si creano questi elementi. Per esempio:

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

}); 

esempio dal vivo: http://jsfiddle.net/9NsAh/

Ma, naturalmente, è solo utile quando si creano i propri elementi.

Answer 4

Come già detto, non sto creando i miei elementi, quindi sparare un evento quando creo l'elemento non è un'opzione.

La soluzione migliore è l'API Mutation Observer, per la quale il Mutation Summary fornisce un'interfaccia amichevole.