Enkeltstående hendelse i jQuery

Da vi studerte frakobling av hendelser med hjelp av metoden off, brukte vi følgende konstruksjon:

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

Først festet vi en behandlingsfunksjon med hjelp av on, deretter frakoblet vi med off.

I jQuery finnes en praktisk metode one, som lar deg binde en enkeltstående hendelse - den vil kun utløses én gang, og deretter automatisk frakobles. Denne metoden tar hendelsestype som første parameter, og en tilknyttet funksjon som den andre.

Følgende eksempel skal vi se på basert på HTML-koden nedenfor:

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

CSS-koden ser slik ut:

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

Nå kobler vi en enkeltstående hendelse til hver li:

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

Trykk på punktene i listen. Som du ser, fikk vi den samme effekten, takket være metoden one.

Koble en hendelse til alle lenker - ved å føre musepekeren over lenken legges dens href til i slutten av teksten i runde parenteser. Etter første gang musepekeren føres over lenken skal hendelsen som legger til href på slutten av teksten frakobles.

Gjør slik at alle input-felt skriver ut sin value når det trykkes på et hvilket som helst av dem, men kun ved det første trykket. Gjentatt trykk på input-feltet skal ikke utløse noen reaksjon.

Det er gitt avsnitt med tall. Ved klikk på et avsnitt skal kvadratet av tallet det inneholder vises i det, men kun ved første klikk. Ved dobbeltklikk på avsnittet skal tallet i avsnittet dobles, men også kun første gang.

Det er gitt avsnitt. Gjør slik at ved første klikk på et avsnitt legges det til '!' på slutten, men kun ved første klikk.