Eenmalige gebeurtenis in jQuery

Toen we het loskoppelen van gebeurtenissen met de methode off bestudeerden, gebruikten we de volgende constructie:

javascript$('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:

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

De CSS-code ziet er als volgt uit:

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

Nu binden we aan elke li een eenmalige gebeurtenis:

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

Klik op de punten van de lijst. Zoals je ziet, kregen we hetzelfde effect, dankzij de methode one.