处理常见JQuery事件处理模式的另一种方法

Question

我有以下代码，例如

$("a.foo").bind(function (e){
    var t;
    if ( $(e.target).is("a") ){
        t = $(e.target);
    }else{
        t = $(e.target).parent("a");
    }
    var data = t.attr("data-info");
});

用英语。我可能有一个锚列表，其中可能有许多跨度。每个锚点都声明为

<a class="foo" href="#" data-info="1">
    <span> ... </span>
    <span> ... </span>
</a>
<a class="foo" href="#" data-info="2">
    <span> ... </span>
    <span> ... </span>
</a>
...
...

我将处理程序绑定到锚点的单击事件但是事件对象返回时带有锚点或其中一个跨度取决于我点击的位置。因此，要将我的html5"数据信息"值回调我必须插入一些混乱的代码。现在出现在我的代码中，我猜测可能存在惯用的JQuery处理方式。

编辑：显示我真正问题的主干片段（原谅咖啡脚本）

class DashboardView extends Backbone.View
  events:
    "click a.foo": "editLogItem"
  editLogItem: (e)->
    t = $(e.target).closest("a")

Answer 1

示例

$(this)也将获得由您绑定的选择器定义的元素。

$("a.foo").click(function (e){
    var data = $(this).data("info");
});

您还应该使用.data而不是.attr("data-...")

编辑：

如果this被覆盖，您可以使用具有相同值的e.currentTarget。

Answer 2

如果处理程序无论如何都附加到<a>，那么它在处理程序中总是this，所以目标是什么并不重要。

$("a.foo").click(function (e){
    var data = $(this).data('info');
    // ...    
});

还要注意，要获得"data-xxx"属性的值，可以使用".data（）"函数。

Answer 3

$('a.foo').click(function () {
    var data = $(this).data('info');
});

我之所以使用点击处理程序，是因为您特别提到了捕获点击事件。