Kertaluonteinen tapahtuma jQueryssä

Kun opimme irrottamaan tapahtumia käyttämällä off -metodia, käytimme seuraavaa rakennetta:

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

Ensin liitimme käsittelijäfunktion käyttämällä on -metodia, sitten irrotimme sen käyttämällä off-metodia.

jQueryssä on kätevä one -metodi, joka mahdollistaa kertaluonteisen tapahtuman sitomisen - se suoritetaan vain kerran, ja sitten irtoaa automaattisesti. Tämä metodi ottaa ensimmäisenä parametrina tapahtuman tyypin, ja toisena - sidotun funktion.

Seuraavan esimerkin tarkastelemme alla olevan HTML-koodin perusteella:

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

CSS-koodi näyttää tältä:

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

Nyt sidomme kertaluonteisen tapahtuman jokaiseen li -elementtiin:

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

Klikkaile listan kohtia. Kuten näette, saimme saman vaikutuksen, kiitos one -metodin.

Sido kaikkiin linkkeihin tapahtuma - kun linkkiin vietää kursoria, sen tekstin loppuun lisätään sen href pyöreissä suluissa. Kun linkkiin on viety kursori ensimmäisen kerran, tulee siitä irrota tapahtuma, joka lisää href -arvon tekstin loppuun.

Tee kaikille input-kentille niin, että ne tulostavat oman value -arvonsa mitä tahansa niistä painettaessa, mutta vain ensimmäisellä painalluskerralla. Toistuva input-kentän painallus ei saa aiheuttaa reaktiota.

Annetut kappaleet sisältävät numeroita. Kun kappaleeseen klikataan, siihen tulee ilmestymään sen sisältämän luvun neliö, mutta vain ensimmäisellä klikkauksella. Kun kappaleeseen kaksoisklikataan, sen luvun tulee kaksinkertaistua, mutta myös vain ensimmäisen kerran.

Annetut kappaleet. Tee niin, että ensimmäisellä klikkauksella kappaleeseen sen loppuun lisätään '!', mutta vain ensimmäisellä klikkauksella.