Evento unico in jQuery

Quando studiavamo il distacco degli eventi con il metodo off, usavamo la seguente costruzione:

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

Prima allegavamo la funzione handler con on, poi la staccavamo con off.

In jQuery esiste un comodo metodo one, che permette di legare un evento una tantum - si eseguirà solo una volta, e poi si staccherà automaticamente. Questo metodo accetta come primo parametro il tipo di evento, e come secondo - la funzione da allegare.

Il prossimo esempio lo considereremo basandoci sul seguente codice HTML:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Il codice CSS appare così:

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

Ora a ogni li leghiamo un evento una tantum:

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

Clicca sui punti della lista. Come puoi vedere, abbiamo ottenuto lo stesso effetto, grazie al metodo one.

Allega a tutti i link un evento - al passaggio del mouse sul link, alla fine del suo testo viene aggiunto il suo href tra parentesi tonde. Dopo il primo passaggio del mouse sul link si deve staccare da esso l'evento, che aggiunge href alla fine del testo.

Per tutti gli input, fate in modo che visualizzino il proprio value alla pressione di qualsiasi di essi, ma solo al primo click. Una pressione ripetuta sull' input non deve causare reazione.

Sono dati paragrafi con numeri. Al click sul paragrafo in esso deve apparire il quadrato del numero che contiene, ma solo al primo click. Al doppio click sul paragrafo il numero nel paragrafo deve raddoppiarsi, ma anche solo la prima volta.

Sono dati paragrafi. Fate in modo che al primo click sul paragrafo alla sua fine venga aggiunto '!', ma solo al primo click.