Была ли у вас необходимость добавлять события (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 отсутствует в документе, однако если в дальнейшем вы каким-то образом добавите ее в структуру, то за ней уже будет прикреплено событие.