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/

获取.delegate的选择器

2 个答案: