Синтаксис делегата jquery .each ()

Question

У меня проблемы с получением записи синтаксиса для эквивалента $ .each с использованием делегатов.

Все примеры, которые я прочитал, просто показывают щелчок или наведение, но как мне написать это с синтаксисом делегата?

$("ul li a").each(function(){

    $(this).addClass("foo");

});

Ура !!

Редактировать: После множества комментариев (спасибо, кстати) я подумал, что лучше опубликовать более явный пример. Приношу свои извинения за отсутствие деталей в моем предыдущем вопросе.

Скажем, например, я хочу привязать всплывающие подсказки к якорям на странице. У меня будет много элементов, которые я хочу настроить в качестве советов, и я хочу уменьшить накладные расходы памяти с помощью делегирования.

Насколько я понимаю, я бы начал:

$(document).delegate("a.tooltip", "click", function(event){

// run click event

}).delegate("a.tooltip", "hover", function(event){

// run mousenter, mouseleave events.

});

Но скажем, для каждого из этих якорей я хочу удалить атрибут title, чтобы он не отображался в браузере при наведении курсора. Я предположил бы (хотя я предполагаю, что здесь), что любые нативные события, подобные этому, будут выполняться до моего события зависания, поэтому я хочу удалить его, прежде чем навести курсор мыши.

Обычно я бы использовал что-то вроде этого:

$("a.tooltip").each(function () {
    // Store our title attribute and remove it so we don't get browser 
    //tooltips showing up.
    $.prop(this, "data-old-title", $.attr(this, "title"));
}).removeAttr("title");

Можно ли сделать это лучше?

Из того, что я понимаю в комментариях и ответах, делегат охватывает только события, и мне все равно придется хранить что-то подобное.

Answer 1

Возможно, у вас неправильное представление о том, что такое .delegate() или как оно работает. Это , а не какая-то магическая функция, которая перехватывает все манипуляции с DOM, она просто использует функцию всплытия событий в DOM, поэтому ее можно использовать только для событий.

Обычно, если у вас есть элемент <div>, к которому вы собираетесь добавить <button> позже, вы можете использовать .delegate(), чтобы связать событие click с самим <div>.

В будущем, когда вы сделаете добавление своей кнопки, нажатие на нее вызовет событие нажатия кнопки, и оно будет продолжать пузыриться в DOM, вызывая событие нажатия каждого родительского элемента по очереди, пока он не достигнет корня документа или один из обработчиков не вызовет event.stopPropagation(). В какой-то момент он достигнет вашего <div>, где вы связали событие делегата. Событие делегата проверит, соответствует ли элемент, который первоначально вызвал событие, исходному селектору (к которому вы хотели привязать ваше событие в первую очередь), и, если это так, запустит подключенный обработчик события в контексте ваша кнопка, поэтому в обработчике события это будет выглядеть как , когда кнопка сгенерировала событие.

Как вы видите, никакой магии нет, она не имеет никакого отношения к мониторингу DOM на предмет изменений или чего-то подобного. Если вы хотите добавлять специальные классы при добавлении элементов в DOM, вы должны обязательно вызывать функцию самостоятельно, когда это происходит.

Answer 2

Нет jQuery для .delegate(), который был бы эквивалентен .each()

Delegate позволяет вам прикреплять обработчики событий к объектам, которые существуют сейчас или в будущем.

Каждый позволяет циклически перебирать коллекцию объектов

Если вы хотите добавить класс foo к тегу привязки на основе какого-либо события, вы можете сделать что-то вроде:

$('ul li').delegate('a', 'click', function(){
    $(this).addClass("foo");
});

Answer 3

$("ul").delegate("a", "hover", function(){
    $(this).addClass("hover");
});