2013-10-26 13 views
5

So che questo potrebbe essere gestito in qualche modo, ma a partire da ora, questo mi sta dando un vero momento difficile. Sto scrivendo uno script e desidero attivare alcune funzioni particolari quando una manipolazione del DOM è completa. Non riesco a modificare/aggiungere/rimuovere nessun altro script (dato che potrebbe essere iniettato nella pagina usando un framework). La pagina utilizza le richieste Ajax (non implementate in jQuery) per caricare/modificare il contenuto. Ora voglio che un evento venga attivato quando tutte le modifiche del DOM sono state completate. Il mio attuale approccio è quello di attivare la funzione in ogni evento DOMSubtreeModified. Qualcosa di simileAttivazione evento javascript su ogni modifica DOM "completo"

$(document).bind('DOMSubtreeModified', doSomeStuff); 

ma lo svantaggio di questo approccio è, diciamo i carichi Ajax 10 elementi in una chiamata, poi per ogni elemento doSomeStuff viene licenziato. Può essere limitato a sparare solo dopo il caricamento del decimo elemento? Qualcosa come resettare l'evento $ (document) .ready()? quindi $ (document) .ready() viene attivato ogni volta che il DOM è pronto (dopo aver caricato il contenuto ajax)

+0

DOMSubtreeModified è deprecato http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 e ci sono raccomandazioni per utilizzare questo invece http: // updates .html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers – Bernhard

+0

@Bernhard DOMSubtreeModified funziona ancora con chrome, ancora come fanno gli osservatori di mutazione a dirmi se il documento è di nuovo pronto? – whizzzkid

risposta

1

In jQuery, c'è un metodo ajaxComplete, che chiama una funzione data dopo ogni chiamata AJAX terminata. Vedi di più here.

Suggerisco di utilizzare jQuery o (nel caso non sia un'opzione) analizzare il codice sorgente di questa funzione per vedere come è fatto lì.

+0

Non sono riuscito a implementare questo. Questo ascolta solo le richieste jQuery ajax? ... perché la pagina in questione non sta usando la funzione Ajax di jQuery. – whizzzkid

+0

la documentazione dice "Ora, fai una richiesta Ajax usando qualsiasi metodo jQuery" quindi sì, penso che funzioni solo con le richieste jQuery. L'aspetto più profondo alle fonti potrebbe aiutare :) –

+0

:(qualsiasi soluzione universale – whizzzkid

2

Con Mutation Observer è possibile ascoltare le modifiche e se l'evento è stato attivato, il documento è stato modificato.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 

var observer = new MutationObserver(function(mutations, observer) { 
    // Add the actions to be done here if a changes on DOM happened 
    console.log(mutations, observer); 

}); 

// Register the element root you want to look for changes 
observer.observe(document, { 
    subtree: true, 
    attributes: true 
}); 
+0

Totalmente valido, ma non voglio che si accenda ad ogni cambio dom. come circa solo sparando a cambiamento dom completare? ... qualcosa come ajaxComplete in jQuery ma senza jQuery ... ascoltare a tutti i contenuti loading ... – whizzzkid

+0

@whizzkid Non c'è nessun caso per tutte le modifiche dome completi. Questo risponde solo se un singolo cambiamento è completo/accaduto. Quindi se hai bisogno di un ascoltatore per il completamento di un numero sconosciuto di modifiche devi creare un contatore o qualcos'altro e ridurre il contatore fino a 0 all'interno del callback dell'osservatore. Se è 0, sai che ogni cambiamento è completo. Ma questa non è una buona cosa e un'architettura di callback migliore è più ragionevole. – Bernhard

+0

può qualcosa come $ (document) .ready() essere reinizializzato per sparare di nuovo quando è di nuovo pronto? – whizzzkid

0

so di essere un po 'in ritardo alla festa, ma suona come si consiglia di evitare il bouncing vostra funzione doSomeStuff. Se non si è contrari all'introduzione di una dipendenza su Underscore.js, ha una bella funzione debounce.