Справочник API
.delegate() в jQuery
Содержание статьи
-
Категории: Events › Event Handler Attachment
Устанавливает обработчик одного или нескольких событий для всех существующих элементов набора jQuery, соответствующих заданному фильтрующему селектору, и для тех элементов, которые будут соответствовать данным критериям в будущем.
Синтаксис и описание:
Добавлено в jQuery 1.4.2.delegate( selector, eventType, handler( eventObject ) )
Добавлено в jQuery 1.4.2.delegate( selector, eventType, eventData, handler( eventObject ) )
Добавлено в jQuery 1.4.3.delegate( selector, events )
Команда .delegate() вешает обработчик eventType на элементы текущего набора jQuery, но фактически реагирует на события, всплывающие от потомков, соответствующих selector — в том числе от потомков, добавленных в DOM после вызова .delegate(). Это способ делегирования событий: один обработчик на «контейнере» вместо множества обработчиков на каждом дочернем элементе.
Начиная с jQuery 1.7 .delegate() внутри просто вызывает .on(), переставляя аргументы:
.delegate(selector, types, data, fn)— это.on(types, selector, data, fn). Поэтому в новом коде лучше сразу писать .on().
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
selector – (строка) CSS-селектор потомков, события от которых должны обрабатываться. Только события, всплывшие от элемента, подходящего под selector, вызовут handler.
eventType – (строка) Тип события (или несколько через пробел), например click или click.myPlugin с пространством имён.
eventData – (объект) Данные, доступные обработчику через event.data.
handler( eventObject ) – Функция-обработчик; получает eventObject, this указывает на элемент, подошедший под selector.
events – (объект) Пары «тип события — обработчик» вида {'click': handler1, 'mouseenter': handler2}.
Примечание:
Главное отличие от прямого .bind() на самих потомках — обработчик, установленный через .delegate(), автоматически работает и для элементов, которые появятся в контейнере позже (после AJAX-подстановки, добавления строк таблицы и т.п.), без повторной привязки.
Примечание:
У .delegate() порядок аргументов selector/events обратный по сравнению с современным .on() — частая причина ошибок при переносе кода:
Метод Порядок аргументов .delegate() selector, events, [data], handler .on() events, selector, [data], handler Замена:
$(container).delegate(selector, 'click', fn)→$(container).on('click', selector, fn).Примечание:
Снять обработчики, поставленные через .delegate(), можно методом .undelegate() (тоже deprecated с 3.0) либо современным .off() с теми же селектором и типом события. Подробнее о механике делегирования — в статье подробнее о .on() и делегировании.
В jQuery 3.x и 4.0:
.delegate() deprecated начиная с jQuery 3.0 (заменён методом .on() ещё с версии 1.7), но не удалён — работает и в 3.7.1, и в 4.0. Для нового кода используйте
.on(events, selector, handler).
Примеры:
Обработать клик по строкам таблицы, включая строки, которые появятся позже после AJAX-загрузки.
$('#users-table').delegate('tr', 'click', function() { $(this).toggleClass('selected'); });Тот же результат через современный .on() — обратите внимание на порядок аргументов.
$('#users-table').on('click', 'tr', function() { $(this).toggleClass('selected'); });Делегирование сразу нескольких событий через объект.
$('#users-table').delegate('tr', { mouseenter: function() { $(this).addClass('hover'); }, mouseleave: function() { $(this).removeClass('hover'); } });