Recentemente mi è capitato di implementare un bellissimo plugin jQuery per lo scrolling infinito di una pagina di elenco: scrollando la pagina fino in fondo, il plugin caricava i nuovi elementi dalla “pagina successiva” e li presentava all’utente in modo continuo, senza alcun refresh della pagina.
Molto bello davvero, peccato però che gli elementi caricati dal plugin non venissero intercettati da jQuery per eventi come click(), pur mantenendo inalterata la classe css usata come selector nel mio script.
Riassumendo: un evento del tipo
$(".myclass").click(function() {
alert('Hello World');
});
non funziona sugli elementi generati dinamicamente e aggiunti al DOM della pagina.
La soluzione a questo problema è semplicissima, e consiste nell’utilizzo del metodo on() di jQuery:
$("#ContainerElm").on('click', '.myclass', function() {
alert('Hello World');
});
Dove #ContainerElm è l’elemento padre degli elementi con classe .myclass scatenanti l’evento.
Nota: jQuery prevede anche un metodo live() con il quale si ottiene il medesimo behavior, ma è stato deprecato a partire dalla versione 1.7.
