one()

Категории: События jQuery > Управление событиями

.one( типСобытия, [ данныеСобытия ], обработчик(объектСобытия))

Возвращает: jQuery

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

.one( типСобытия, [ данныеСобытия ], обработчик(объектСобытия) )

Добавлена в версию: 1.1

типСобытия

Строка

Строка, содержащая один или несколько типов событий JavaScript, такие как "click" или "submit", или пользовательские имена событий.

данныеСобытия

Карта

Карта данных, которые будут переданы в обработчик события.

обработчик(объектСобытия)

Функция

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

Этот метод идентичен .bind(), за исключением того, что обработчик освобождается после своего первого вызова. Например:

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

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

$('#foo').bind('click', function(event) {
  alert('This will be displayed only once.');
  $(this).unbind(event);
});

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

Примеры

Пример 1

Связывание одиночного клика с каждым элементом div.

    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.");
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    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>
  <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>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Click a green square...</p>
</body>
</html>

Попробуйте сами

Пример 2

Отображение текста параграфа в сообщении alert после одного клика на каждом из них:

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

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
$("p").one("click", function(){
  alert( $(this).text() );
});
  });
  </script>
</head>
<body>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <div></div>
  <p>Click a paragraph...</p>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

one()

.one( типСобытия, [ данныеСобытия ], обработчик(объектСобытия))

.one( типСобытия, [ данныеСобытия ], обработчик(объектСобытия) )

Примеры

Пример 1

Пример 1 - Полный код:

Пример 2

Пример 2 - Полный код:

Комментарии