.delegate( селектор, типСобытия, обработчик )
Добавлена в версию:
1.4.2Селектор для фильтрации элементов, которые вызывают событие.
Строка,
содержащая один или более разделенных пробелами типов событий
JavaScript, таких как "click" или "keydown," или пользовательские имена
событий.
Функции для выполнения во время запуска события.
.delegate( селектор, типСобытия, данныеСобытия, обработчик )
Добавлена в версию:
1.4.2Селектор для фильтрации элементов, которые вызывают событие.
Строка,
содержащая один или более разделенных запятыми типов событий
JavaScript, таких как "click" или "keydown," или пользовательские имена
событий.
Карта данных, которая будет переданна в обработчик события.
Функция для выполнения во время запуска события.
Делегирование является альтернативой использованию метода .live(),
позволяет для каждого связанного события делегирование конкретных элементов DOM.
Например, следующий код делегирования:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
Эквивалентен следующему коду, написанному с использованием .live()
:
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
Смотрите также метод .undelegate() для способа удаления обработчика события, добавленного в .delegate()
.
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
Пример 2
Для отображения текста каждого параграфа в окне предупреждения всякий раз, когда он нажат:
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});
Пример 3
Чтобы отменить действие по умолчанию и не допустить его распространение, верните false:
$("body").delegate("a", "click", function() { return false; })
Пример 4
Чтобы отменить только действие по умолчанию с помощью метода preventDefault.
Пример 5
Также можно связать пользовательские события.
$("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});