jQuery: monitorare l'inserimento di nuovi elementi con l'oggetto MutationObserver

Un problema comune in JavaScript e jQuery è individuare gli elementi che sono stati inseriti dinamicamente in un documento ed eseguire un'azione su di essi. La soluzione è quella di utilizzare l'oggetto MutationObserver.

In passato potevamo utilizzare l'evento DOMNodeInserted:

$( document ).on( "DOMNodeInserted", function( e ) {
	console.log( e.target );  // il nuovo elemento	
});

Ma "this feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped". (– documentazione di Mozilla). In questo caso dovremmo usare l'oggetto MutationObserver.

Per esempio possiamo ora scrivere:

// il nodo da monitorare
var target = $( "#content" )[0];

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // se sono stati aggiunti nuovi nodi
    	var $nodes = $( newNodes ); // set jQuery
    	$nodes.each(function() {
    		var $node = $( this );
    		if( $node.hasClass( "message" ) ) {
    			// azione
    		}
    	});
    }
  });    
});

// configurazione
var config = { 
	attributes: true, 
	childList: true, 
	characterData: true 
};
 
// inizializzazione
observer.observe(target, config);
 
// possiamo interrompere il monitoraggio
observer.disconnect();

Come si può notare, si tratta di un modo molto efficace per monitorare lo stato degli elementi in relazione all'aggiunta di nuovi elementi nella loro struttura DOM.