jQuery.on() funziona per gli elementi che vengono aggiunti dopo la creazione del gestore eventi?

Question

ho sempre avuto l'impressione che .on() abbia funzionato come .live() per quanto riguarda gli elementi creati dinamicamente (ad esempio io uso $('.foo').on('click', function(){alert('click')}); e quindi un elemento con la classe foo è stato creato a causa di alcuni AJAX, ora mi aspetto un clic su quello elemento per causare un avviso). In pratica, questi non erano i risultati che ho ottenuto. Potrei commettere un errore, ma qualcuno potrebbe aiutarmi a capire il modo nuovo per ottenere questi risultati, sulla scia di .on()?

Grazie in anticipo.

Answer 1

.on() funziona con elementi creati dinamicamente se utilizzato correttamente. Il jQuery doc fa un buon lavoro nel descriverlo.

Il modo di usarlo per elementi dinamici è quello di utilizzare questa forma:

$("static selector").on('click', "dynamic selector", fn); 

Il selettore statica deve essere risolto in un oggetto che è sia un antenato degli oggetti dinamici ed è statico - è presente quando si eseguire questa riga di codice e non verrà rimosso o ricreato.

Il selettore dinamico è un selettore che corrisponde ai tuoi elementi dinamici. Non devono esistere nel momento in cui il gestore eventi viene installato per la prima volta e possono andare e venire tutte le volte che vuoi.

Quindi, se "#container" corrisponde a un antenato statico e ".foo" corrisponde agli elementi dinamici su cui si desidera applicare i gestori di clic, si utilizzerà questo;

$("#container").on("click", ".foo", fn); 

Se davvero si vuole capire, questo è come la gestione degli eventi delegato di .on() opere. Quando effettui la chiamata .on() in alto, ha collegato un gestore di eventi click all'oggetto #container. Qualche tempo dopo, quando fai clic su un oggetto .foo, non c'è alcun gestore di clic sull'oggetto reale .foo, quindi il clic fa comparire la catena degli antenati. Quando il clic arriva all'oggetto #container, c'è un gestore di clic e jQuery guarda quel gestore e vede che questo gestore è solo per gli oggetti in cui l'oggetto originale cliccato corrisponde al selettore ".foo". Verifica la destinazione dell'evento per vedere se corrisponde a quel selettore e, in caso affermativo, chiama il gestore di eventi per esso.

Il metodo (ora deprecato) .live() ha funzionato collegando tutti i gestori di eventi all'oggetto del documento. Dato che l'oggetto documento è un antenato di ogni oggetto nel documento, hanno ottenuto la gestione degli eventi delegati in questo modo. Così, nell'esempio di cui sopra, questi due sono equivalenti:

$(document).on("click", ".foo", fn); 
$(".foo").live("click", fn); 

Ma, allegando tutti i gestori di eventi delegati sul documento a volte ha creato un serio collo di bottiglia in modo jQuery ha deciso che era un brutto modo per farlo ed era meglio richiedere allo sviluppatore di specificare un antenato statico che si spera fosse più vicino all'oggetto di destinazione effettivo rispetto all'oggetto del documento.

Answer 2

Penso che si faccia una situazione simile che ho affrontato. questa è una buona soluzione per gli eventi di associazione con elementi generati in seguito.

Binding Jquery Events On Elements Generated Through Other Events