jQuery: delega degli eventi (on)

jQuery nelle sue successive versioni ha cambiato più volte la modalità di associazione degli eventi agli oggetti html.
Il problema è particolarmente evidente quando dobbiamo assegnare un evento a un oggetto che viene aggiunto successivamente al caricamento alla nostra pagina, come, per esempio, nel caso di ajax.

All’inizio si usava il live, successivamente delegate, adesso on; i vecchi metodi sono supportati ma sconsigliati.

Proviamo quindi l’on, costruiremo una pagina con un bottone, al click creeremo un secondo bottone sul quale gestire a sua volta il click.
Partiamo dall’html:

<div id=”pulsanti”>
<input type=”button” id=”btn1″ value=”box1″>
</div>
<div id=”box1″></div>

Il css minimo:

.box{ width:300px; min-height:100px; border:1px solid #000; margin:10px;}

Al document.ready procediamo con la creazione del pulsante:

$(document).ready(function(e) {
$(‘#btn1′).click(function(){$(‘#pulsanti’).append(‘<input type=”button” id=”btn2″ value=”Append”>’);})
});

A questo punto si tratta di gestire l’evento click sul btn2 e useremo appunto on:

$(‘#pulsanti’).on(‘click’,'#btn2′,aggiungi)

con i parametri evento, selettore, callback, in questo caso si poteva anche usare una funzione anonima.

E se volessimo disablitare il click dopo l’esecuzione di un aggiungi? La risposta è intuitiva: off,
così gestiremo uno e un solo click sul btn2:

function aggiungi(){
$(‘#pulsanti’).off(‘click’,'#btn2′)
}

Esempio