Установка обработчика с заданным контекстом

.delegate()

Устанавливает обработчик события на элементы, соответствующие заданному селектору. Особенностью метода является то, что если на страницу будут вставлены новые элементы, которые соответствуют этому селектору, то они также будут реагировать на заданные события. Выбранные элементы играют роль контекста выполнения метода (то есть, поиск элементов, для установки обработчиков событий, будет производиться только внутри выбранных элементов). Метод имеет один вариант использования:

.delegate(selector, eventType, [eventData], handler):jQuery1.4.2

selector — селектор для поиска элементов, на которые будет установлен заданный обработчик событий.
eventType — тип обрабатываемого события. Например "click", "resize" (список всех типов событий).
eventData — данные, передаваемые обработчику событий. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...}.
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

Замечание 1: начиная с jQuery-1.7, данный метод считается устаревшим. Предпочтительным является методом .on().

Замечание 2: установленный обработчик можно с помощью метода undelegate().

Замечание 3: для правильной работы метода delegate(), необходимо вызывать его непосредственно после выбора элементов с помощью селектора.
$("div").delegate("p", "click", foo); - правильно, $("div").next().delegate("p", "click", foo); - неправильно.

Простой пример:

// установим обработчик события "click", всем li-элементам, найденным внутри элементов ul.
$("ul").delegate("li", "click", function(){
  alert('Вы нажали на элемент списка');
});
 
// Теперь при нажатии на элементы li, будет выводиться сообщение.

delegate() и live()

Принцип работы метода delegate() совпадает с live(). Поэтому, подробности их использования, мы расположили в одном месте — описании live().

Единственным отличием этих двух методов является то, что при использовании delegate, обработчик события устанавливается не самим выбранным элементам, а элементам, найденным внутри них с помощью селектора. Эта особенность помогает упростить код в следующем случае:

// Необходимо установить обработчики события всем ячейкам таблицы, 
// при этом используя сами таблицы в качестве контекста:
 
// использование .live()
$("table").each(function(){
  $("td", this).live("hover", function(){
    $(this).toggleClass("hover");
  });
});
 
// использование .delegate()
$("table").delegate("td", "hover", function(){
  $(this).toggleClass("hover");
});

Ссылки

Поисковые ключи:
  • установка обработчика с заданным контекстом
  • .delegate()
  • delegate()