Egyszeri esemény a jQuery-ben

Amikor az események leváltását tanulmányoztuk a off metódussal, a következő konstrukciót használtuk:

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

Először hozzárendeltünk egy eseménykezelő függvényt a on segítségével, majd leváltottuk a off metódussal.

A jQuery-ben van egy kényelmes metódus, a one, amely lehetővé teszi egy egyszeri esemény hozzárendelését - az csak egyszer fut le, majd automatikusan levált. Ez a metódus első paraméterként az esemény típusát fogadja, második paraméterként pedig a hozzárendelt függvényt.

A következő példát az alábbi HTML kód alapján vizsgáljuk meg:

<ul>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ul>

A CSS kód így néz ki:

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

Most minden egyes li elemhez hozzárendelünk egy egyszeri eseményt:

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

Kattintsunk a lista elemeire. Amint látható, ugyanazt a hatást értük el, köszönhetően a one metódusnak.

Rendelj minden linkhez egy eseményt - amikor a kurzor a linkre kerül, annak szövegéhez a végéhez írd oda a link href értékét zárójelben. Az első rámutatás után váld le a linkről az eseményt, amely a href értéket adja a szöveg végéhez.

Minden input mezőnél érd el, hogy kiírják a saját value értéküket bármelyikre kattintáskor, de csak az első kattintáskor. Az input mező ismételt megnyomása ne váltson ki reakciót.

Adottak számokat tartalmazó bekezdések. Kattintáskor a bekezdésre annak tartalmaznia kell a benne lévő szám négyzetét, de csak az első kattintáskor. Dupla kattintáskor a bekezdésre a benne lévő szám megduplázódjon, de szintén csak az első alkalommal.

Adottak bekezdések. Érd el, hogy az első kattintáskor a bekezdés végéhez egy '!' kerüljön, de csak az első kattintáskor.