Delegazione in jQuery

Se hai studiato JavaScript, hai già incontrato l'argomento delegazione degli eventi, con cui puoi, ad esempio, eliminare i problemi quando si assegnano eventi a nuovi elementi. Vediamo come apparirà in jQuery.

Prendiamo il seguente codice HTML:

<ul>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
</ul>

Il CSS per esso appare così:

li {
	width: 100px;
	cursor: pointer;
}

Ora, utilizzando il metodo on, colleghiamo il metodo click non alla voce di lista li, come abbiamo fatto nelle lezioni precedenti, ma all'elenco ul stesso. Inoltre, passeremo come secondo parametro (opzionale) 'li' come selettore dei discendenti. Vediamo cosa abbiamo ottenuto:

$('ul').on('click', 'li', function() {
	$(this).append('!');
});

Dato un ul, con diversi li al suo interno. Sotto ul crea un pulsante, al click del quale alla fine di ul verrà aggiunto un nuovo li con testo 'voce'. Fai in modo che al click su ogni li, alla sua fine venga aggiunto '!'. Questo deve funzionare anche per i li appena aggiunti. Risolvi il problema utilizzando la delegazione (cioè l'evento deve essere assegnato a ul).

Data una tabella di utenti con due colonne: nome e cognome. Sotto la tabella crea un modulo, con cui potrà essere aggiunto un nuovo utente alla tabella. Fai in modo che al click su qualsiasi cella appaia un prompt, con cui puoi modificare il testo della cella. Risolvi il problema utilizzando la delegazione (cioè l'evento deve essere assegnato a table).