获取 .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
    }
});

---

更新：

原始< code>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/