La event delegation di jQuery trova la sua più naturale applicazione in AJAX. Vediamola in dettaglio.
Supponiamo di avere due elementi select. Nel primo gli elementi option che lo compongono sono già presenti nella pagina e contengono il nome di una provincia italiana con il relativo ID che fa riferimento al database sottostante.
Quando l'utente seleziona una provincia, la seconda select box viene popolata via AJAX con i comuni presenti in quella provincia. Selezionando un comune appare la scheda descrittiva del comune scelto. Qui entra in gioco la event delegation.
Se la struttura HTML è la seguente:
<select name="provincia" id="provincia">
<option value="">Scegli una provincia</option>
<option value="1">Roma</option>
<option value="2">Milano</option>
<!-- continua -->
</select>
<select name="comune" id="comune">
<option value="">Scegli un comune</option>
<!-- vuoto -->
</select>
Avremo il seguente codice jQuery:
// Event delegation sulla seconda select box
$( document ).on( "change", "#comune", function() {
var $comune = $( this ),
value = $( "option:selected", $comune ).val();
$.get( "ajax.php", { comune: value }, function( response ) {
// Mostra la scheda del comune
});
});
// Gestione della prima select box
$( "#provincia" ).on( "change", function() {
var $provincia = $( this ),
value = $( "option:selected", $provincia ).val();
// Popolo la select box
$.get( "ajax.php", { provincia: value }, function( html ) {
$( "#comune" ).html( "<option value="">Scegli un comune</option>" + html );
});
});
Una volta capito il meccanismo, che di fatto crea la event delegation prima della principale richiesta AJAX, risulta molto facile applicarlo in svariati contesti.