Engangsbegivenhed i jQuery

Da vi studerede afkobling af begivenheder med metoden off, brugte vi følgende konstruktion:

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

Først koblede vi en callback-funktion til med on, derefter afkoblede vi med off.

I jQuery findes der en praktisk metode kaldet one, som tillader at binde en engangsbegivenhed - den udføres kun een gang, og kobles derefter automatisk fra. Denne metode tager begivenhedstypen som første parameter, og den tilknyttede funktion som anden parameter.

Det næste eksempel vil vi se på baseret på følgende HTML-kode:

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

CSS-koden ser sådan ud:

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

Nu binder vi en engangsbegivenhed til hver li:

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

Prøv at klikke på punkterne i listen. Som du kan se, opnår vi den samme effekt, takket være metoden one.

Kobl følgende begivenhed til alle links: når der hoveres over et link, skal dens href tilføjes i slutningen af dens tekst i runde parenteser. Efter første hover på linket skal begivenheden, der tilføjer href i slutningen af teksten, afkobles.

Gør sådan ved alle input-felter, at de udskriver deres value ved et klik på et hvilket som helst af dem, men kun ved det første klik. Et gentaget klik på input-feltet bør ikke udløse nogen reaktion.

Der er givet afsnit med tal. Ved klik på et afsnit skal kvadratet på tallet det indeholder vises i afsnittet, men kun ved første klik. Ved dobbeltklik på afsnittet skal tallet i afsnittet fordobles, men også kun første gang.

Der er givet afsnit. Gør sådan, at ved første klik på et afsnit tilføjes et '!' i slutningen, men kun ved første klik.