L'evento DOMNodeInserted si attiva quando un nuovo elemento viene aggiunto al documento. Si tratta di un evento molto utile che può essere utilizzato in vari scenari, come ad esempio le richieste AJAX. Vediamolo in dettaglio.
Con questo evento possiamo far scomparire qualsiasi elemento e rimuoverlo dal documento dopo un determinato periodo di tempo. Il riferimento all'elemento inserito è conservato nella proprietà target dell'oggetto event:
$(document).bind('DOMNodeInserted', function(e) {
var element = e.target;
setTimeout(function() {
$(element).fadeOut(1000, function() {
$(this).remove();
});
}, 2000);
});
L'evento viene associato all'oggetto document tramite il metodo bind(). Eccone un esempio pratico:
$('#insert').click(function() {
$('<div id="test"/>').
text('Test').
appendTo('body');
});
Una volta inserito, l'elemento scomparirà e sarà rimosso dal DOM dopo 2 secondi (2000 millesimi di secondo). Questo evento funziona su tutti gli elementi che verranno aggiunti in futuro al documento.