Однократное событие в jQuery

Когда мы изучали отвязывание событий с помощью метода off, мы использовали следующую конструкцию:

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

Сначала мы прикрепляли функцию-обработчик с помощью on, затем отвязывали с помощью off.

В jQuery есть удобный метод one, который позволяет привязать однократное событие - оно выполнится только только один раз, а потом автоматически отвяжется. Этот метод первым параметром принимает тип события, а вторым - привязанную функцию.

Следующй пример мы рассмотрим на основе нижеприведенного HTML кода:

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

CSS код выглядит так:

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

Теперь к каждой li привязываем однократное событие:

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

Понажимайте на пункты списка. Как видите, мы получили тот же эффект, благодаря методу one.