Come rilevare la creazione di nuovi elementi in jQuery?

Diciamo che ho il seguente codice che restituisce il numero di elementi di ancoraggio in una pagina:

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

Se invoco il documento pronto, funzionerebbe come previsto. Ma cosa succede se ora un nuovo link viene inserito in una pagina in modo dinamico tramite javascript, come posso ricevere una notifica per eseguire nuovamente la funzione di link counter? (Non ho il controllo su uno script che potrebbe creare un nuovo collegamento).

Fondamentalmente sto cercando qualcosa di simile a live() solo che guarderebbe l’evento di creazione di elementi, qualcosa come:

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

che si innescherebbe quando viene creato un nuovo elemento.

Puoi usare il plugin .livequery() per questo, che viene eseguito per ogni elemento, inclusi quelli nuovi, come questo:

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

Tuttavia, questo plug-in non è aggiornato e non è consigliato per le versioni correnti di jQuery.

Di solito è più semplice farlo quando crei gli elementi, ad esempio, se lo fai dopo le richieste AJAX, il gestore .ajaxComplete() può essere un buon posto, ad esempio:

 $(document).ajaxComplete(getLinkCount); 

Questo dovrebbe essere eseguito dopo ogni richiesta e poiché normalmente si creano elementi nel gestore di success , sarebbero già presenti quando questo gestore completo viene eseguito.

Potresti usare l’evento DOMSubtreeModified. Per esempio:

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

Puoi usare la libreria arrive.js che ho sviluppato per lo stesso identico scopo (usa internamente MutationObserver ). Uso:

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

La risposta accettata è del 2010 e utilizza un plugin jQuery che non viene più mantenuto triggersmente. La risposta con DOMSubTreeModified più alto suggerisce l’utilizzo di DOMSubTreeModified che ora è deprecato e non dovrebbe più essere utilizzato.

Oggi, un MutationObserver è ciò che dovresti usare per rilevare quando un elemento è stato aggiunto al DOM. MutationObservers ora è ampiamente supportato da tutti i browser moderni (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, ecc.).

Ecco un semplice esempio di come puoi usare un MutationObserver per ascoltare quando un elemento viene aggiunto al DOM.

Per brevità, sto usando la syntax jQuery per build il nodo e inserirlo nel 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!

Il gestore di eventi observer si attiverà ogni volta che qualsiasi nodo viene aggiunto o rimosso dal document . All’interno del gestore, eseguiamo un controllo di contains per determinare se myElement è ora nel document .

Non è necessario iterare su ogni MutationRecord memorizzato in mutations perché è ansible eseguire il controllo document.contains direttamente su myElement .

Per migliorare le prestazioni, sostituire il document con l’elemento specifico che conterrà myElement nel DOM.