Назначение событий для отсутствующих элементов в документе Jquery 


Назначение событий для отсутствующих элементов в документе Jquery

Опубликовано

Была ли у вас необходимость добавлять события (click, hover, change и другие) для пока не существующих элементов в документе, но планируемых в будущем внедрить их в него (например, добавляя новый элемент с помощью метода .append()) или подгружать часть документа при помощи функции $.ajax.

Если да, то вы наверняка сталкивались с проблемой - используя стандартные обработчики такие как .click() .hover() .keypress() и т.д., которые вешают событие на уже присутствующие элементы в структуре документа, но не могут прикрепить событие на элементы, которых пока в ней нет.

Для таких случаев в библиотеке предусмотрен обработчик .delegate(), прикрепляющий событие для уже существующих элементов, а также для элементов, добавляемых в будущем.

Синтаксис .delegare()

.delegate( selector, eventType, handler(eventObject) )

  • selector – селектор ссылающийся на элемент, который вызывает событие.
  • eventType – тип события: click, keydown и т.д.
  • handler(eventObject) – функция выполняющаяся в момент срабатывания события.

Пример

<!doctype html>
<html >
<head>
<script>
$("body").delegate( ".button1 ", "click", function() {
 alert("это сообщение отобразится после нажатия на кнопку Button 1");
});
$("body").delegate( ".button2", "click", function() {
 alert("это сообщение отобразится после нажатия на кнопку Button 2");
});
</script>
</head>
<body> 
 <button class="button1">Button 1</button>
</body>
</html>

В примере были делегированы два события для кнопок с названиями классов button1, button2. На данном этапе кнопка с классом button2 отсутствует в документе, однако если в дальнейшем вы каким-то образом добавите ее в структуру, то за ней уже будет прикреплено событие.