Eenmalige gebeurtenis in jQuery
Toen we het loskoppelen van gebeurtenissen met
de methode
off
bestudeerden,
gebruikten we de volgende constructie:
$('li').on('click', function() {
$(this).append('!');
$(this).off('click', func);
});
Eerst koppelden we de handler-functie met
on,
daarna koppelden we deze los met off.
jQuery heeft een handige methode
one,
die het mogelijk maakt een eenmalige gebeurtenis te binden -
deze wordt slechts één keer uitgevoerd, en
koppelt daarna automatisch los. Deze methode
accepteert als eerste parameter het type gebeurtenis,
en als tweede de gebonden functie.
Het volgende voorbeeld bekijken we op basis van de onderstaande HTML-code:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
De CSS-code ziet er als volgt uit:
li {
width: 100px;
cursor: pointer;
}
Nu binden we aan elke li een
eenmalige gebeurtenis:
$('li').one('click', function() {
$(this).append('!');
});
Klik op de punten van de
lijst. Zoals je ziet, kregen we hetzelfde effect, dankzij
de methode one.
Koppel aan alle links een gebeurtenis -
bij het aanwijzen van een link wordt aan het einde van de tekst
de href tussen ronde
haken toegevoegd. Na de eerste keer aanwijzen van de link
moet de gebeurtenis die de
href toevoegt aan het einde van de tekst, worden losgekoppeld.
Zorg voor alle inputs dat ze
hun eigen value uitvoeren bij
aanklikken, maar alleen bij de
eerste klik. Een volgende klik op
de input mag geen reactie veroorzaken.
Er zijn alinea's met getallen. Bij een klik op een alinea moet daarin het kwadraat van het getal verschijnen dat deze bevat, maar alleen bij de eerste klik. Bij dubbelklikken op een alinea moet het getal in de alinea verdubbeld worden, maar ook alleen de eerste keer.
Er zijn alinea's. Zorg ervoor dat bij de eerste
klik op een alinea er een '!' aan het einde wordt toegevoegd,
maar alleen bij de eerste klik.
