Получить селектор .delegate

Question

В этом коде мне нужно получить объект DOM , то есть .tabs исходный селектор, с которым связан делегат.

$(".tabs").delegate("li:not(.selected) a", "click", function () {
//  ^    
//  |
//  +-----------i need to get this dom object   
    var selector = $(this).selector; // <---- returns an empty string ?
    return false;
});

Как определить, что такое .tabs и получить доступ к объекту?

Answer 1

Пока кто-то не найдет более разумный способ, можно обойти это, добавив обработчик события к самим выбранным элементам:

$('.tabs').click(function(event) {
    event.root = this; // or whatever name suits you best
});

$(".tabs").delegate("li:not(.selected) a", "click", function (event) {
    // event.root contains the DOM element
});

jQuery гарантирует, что обработчики событий выполняются в том порядке, в котором они присоединены.

Или вы вообще не используете delegate и самостоятельно проверяете селектор ( это, вероятно, лучшее решение ):

$('.tabs').click(function(event) {
    if($(event.target).is("li:not(.selected) a")) {
        // this refers to the .tab DOM element
        // event.target refers to the originally clicked element
    }
});

---

Обновление:

Исходный объект Event доступен через event.originalEvent. Так что вы могли бы сделать:

$(".tabs").delegate("li:not(.selected) a", "click", function (event) {
    var dom = event.originalEvent.currentTarget;
});

Но, похоже, currentTarget поддерживается только в IE9, и нет альтернативы в более низких версиях IE .

Таким образом, большинство кроссбраузерно-совместимых решений - все те же, что и выше.

Answer 2

С помощью метода .on() вы можете получить доступ к делегированному целевому объекту, передав объект события своей функции и открыв его свойство delegateTarget.

Пример:

$('.foo').on('click', 'a', function(ev) {
  // this is the .foo element for this anchor
  console.log(ev.delegateTarget);
});

Рабочий пример: http://jsfiddle.net/corydorning/ZzADh/