.one()

.one( events [, data ], handler )Возвращает: jQuery

Описание: Привязать обработчик к событию для элементов. Обработчик выполняется не более одного раза на элемент за тип события.

версия добавлена: 1.1.one( events [, data ], handler )
- events
  
  Тип: Строка
  
  Строка, содержащая один или несколько типов событий JavaScript, таких как "click" или "submit", или имена пользовательских событий.
- data
  
  Тип: Объект
  
  Данные, передаваемые обработчику в event.data при срабатывании события.
- handler
  
  Тип: Функция( Event eventObject )
  
  Функция, которая выполняется в момент срабатывания события.
версия добавлена: 1.7.one( events [, selector ] [, data ], handler )
- events
  
  Тип: Строка
  
  Одно или несколько разделенных пробелом типов событий и необязательных имен пространств, таких как "click" или "keydown.myPlugin".
- selector
  
  Тип: Строка
  
  Строка селектора для фильтрации потомков выбранных элементов, которые вызывают событие. Если селектор null или опущен, событие всегда срабатывает, когда оно достигает выбранного элемента.
- data
  
  Тип: Любое
  
  Данные, передаваемые обработчику в event.data при срабатывании события.
- handler
  
  Тип: Функция( Event eventObject )
  
  Функция, которая выполняется при срабатывании события. Значение false также допускается в качестве сокращения для функции, которая просто return false.
версия добавлена: 1.7.one( events [, selector ] [, data ] )
- events
  
  Тип: Объект
  
  Объект, в котором строковые ключи представляют один или несколько разделенных пробелами типов событий и необязательных имен пространств, а значения представляют функцию обработчика, которая должна вызываться для события(ей).
- selector
  
  Тип: Строка
  
  Строка селектора для фильтрации потомков выбранных элементов, которые вызовут обработчик. Если селектор равен null или опущен, обработчик всегда вызывается, когда он достигает выбранного элемента.
- data
  
  Тип: Любое
  
  Данные, передаваемые обработчику в event.data при возникновении события.

Метод .one() идентичен методу .on(), за исключением того, что обработчик для данного элемента и типа события отвязывается после первого вызова. Например:

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

После выполнения кода щелчок по элементу с идентификатором foo отобразит диалоговое окно. Последующие щелчки ничего не сделают. Этот код эквивалентен:

$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});

Другими словами, явное вызов .off() изнутри обработчика с обычной привязкой имеет точно такой же эффект.

Если первый аргумент содержит более одного разделенного пробелом типа событий, обработчик событий вызывается по одному разу для каждого типа события.

$( "#foo" ).one( "click mouseover", function( event ) {
  alert( "The " + event.type + " event happened!" );
});

В примере выше диалоговое окно может быть отображено дважды из-за двух типов событий (click и mouseover).

Примеры:

Связать одноразовое событие клика с каждым div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    background: green;
    border: 10px outset;
    cursor:pointer;
  }
  p {
    color: red;
    margin: 0;
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
 
<script>
var n = 0;
$( "div" ).one( "click", function() {
  var index = $( "div" ).index( this );
  $( this ).css({
    borderStyle: "inset",
    cursor: "auto"
  });
  $( "p" ).text( "Div at index #" + index + " clicked." +
    " That's " + (++n) + " total clicks." );
});
</script>
 
</body>
</html>

Демо:

Для отображения текста всех абзацев в окне диалога при первом щелчке по каждому из них:

$( "p" ).one( "click", function() {
  alert( $( this ).text() );
});

Обработчики событий будут срабатывать один раз на элемент за тип события

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div class="count">0</div>
<div class="target">Hover/click me</div>
 
<script>
var n = 0;
$(".target").one("click mouseenter", function() {
  $(".count").html(++n);
});
</script>
 
</body>
</html>

.one( events [, data ], handler )Возвращает: jQuery

версия добавлена: 1.1.one( events [, data ], handler )

версия добавлена: 1.7.one( events [, selector ] [, data ], handler )

версия добавлена: 1.7.one( events [, selector ] [, data ] )

Примеры:

Демо:

Демо: