单击锚标记内的字形时，无法访问锚标记数据

Question

当锚标签中只有一个glyphicon时，如何获取数据？ 以下是问题的演示...

http://jsfiddle.net/sua0yp4y/2/

HTML：

<h1 id="output1">OUTPUT1</h1>
<h1 id="output2">OUTPUT2</h1>
<a class="withIcon" href="#" data-taskid="1123" data-userid="5813"><span class="glyphicon glyphicon-time"></span></a>

<h1 id="output3">OUTPUT3</h1>
<h1 id="output4">OUTPUT4</h1>
<a class="withoutIcon" href="#" data-taskid="1123" data-userid="5813">without icon</a>

JS：

$('body').on('click','a.withIcon',function(e){
    e.preventDefault();
    $("h1#output1").text($(e.target).data('userid'));
    $("h1#output2").text($(e.target).data('taskid'));
});

$('body').on('click','a.withoutIcon',function(e){
    e.preventDefault();
    $("h1#output3").text($(e.target).data('userid'));
    $("h1#output4").text($(e.target).data('taskid'));
});

Answer 1

添加最接近的（'a'）以找到最接近的锚标记并获取数据值：

$("h1#output1").text($(e.target).closest('a').data('userid'));
    $("h1#output2").text($(e.target).closest('a').data('taskid'));

http://jsfiddle.net/sua0yp4y/3/

Answer 2

用户单击图像可以更改事件：

$('body').on('click','.glyphicon',function(e){
    e.preventDefault();
    $("h1#output1").text($(e.target).parent().data('userid'));
    $("h1#output2").text($(e.target).parent().data('taskid'));
});

小提琴

Answer 3

使用this而不是e.target引用您单击的元素。

更新的小提琴-http: //jsfiddle.net/sua0yp4y/5/

$('body').on('click','a.withIcon',function(e){
    e.preventDefault();
    $("h1#output1").text($(this).data('userid'));
    $("h1#output2").text($(this).data('taskid'));
});

$('body').on('click','a.withoutIcon',function(e){
    e.preventDefault();
    $("h1#output3").text($(this).data('userid'));
    $("h1#output4").text($(this).data('taskid'));
});

Answer 4

将$（e.target）替换为$（this），即可解决问题。

demo http://jsfiddle.net/sua0yp4y/8/