Enkelthändelse i jQuery

När vi studerade avkoppling av händelser med metoden off, använde vi följande konstruktion:

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

Först bifogade vi en hanterarfunktion med on, sedan kopplade vi bort den med off.

I jQuery finns en praktisk metod one, som låter dig binda en enkelthändelse - den kommer att exekveras endast en gång, och sedan automatiskt kopplas bort. Denna metod tar först en händelsetyp som parameter, och sedan en bifogad funktion.

Följande exempel kommer vi att titta på baserat på HTML-koden nedan:

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

CSS-koden ser ut så här:

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

Nu binder vi en enkelthändelse till varje li:

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

Klicka på punkterna i listan. Som du ser fick vi samma effekt, tack vare metoden one.

Binda en händelse till alla länkar - när man hovrar över en länk ska dess href läggas till i slutet av dess text i runda parenteser. Efter första gången man hovrar över länken ska händelsen som lägger till href i slutet av texten kopplas bort.

Gör så att alla inputfält visar sitt value när man klickar på något av dem, men endast vid första klicket. Ett andra klick på inputfältet ska inte ge någon reaktion.

Det finns stycken med siffror. När man klickar på ett stycke ska kvadraten på talet det innehåller visas i det, men endast vid första klicket. Vid dubbelklick på ett stycke ska talet i stycket fördubblas, men också endast första gången.

Det finns stycken. Gör så att vid första klicket på ett stycke läggs ett '!' till i slutet, men endast vid första klicket.