单击锚标记内的字形图标时无法访问锚标记数据
anchor tag data not accessible when clicking on glyphicons inside the anchor tag
当锚标签中只有一个字形时,如何获取数据?下面是问题的演示...
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'));
});
添加最接近的('a')找到最接近的锚标签并得到数据值:
$("h1#output1").text($(e.target).closest('a').data('userid'));
$("h1#output2").text($(e.target).closest('a').data('taskid'));
用户点击图片可更改事件:
$('body').on('click','.glyphicon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).parent().data('userid'));
$("h1#output2").text($(e.target).parent().data('taskid'));
});
使用 this
而不是 e.target
来引用您单击的元素。
已更新 Fiddle - 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'));
});
将 $(e.target) 替换为 $(this) 您的问题得到解决。
demo http://jsfiddle.net/sua0yp4y/8/
当锚标签中只有一个字形时,如何获取数据?下面是问题的演示...
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'));
});
添加最接近的('a')找到最接近的锚标签并得到数据值:
$("h1#output1").text($(e.target).closest('a').data('userid'));
$("h1#output2").text($(e.target).closest('a').data('taskid'));
用户点击图片可更改事件:
$('body').on('click','.glyphicon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).parent().data('userid'));
$("h1#output2").text($(e.target).parent().data('taskid'));
});
使用 this
而不是 e.target
来引用您单击的元素。
已更新 Fiddle - 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'));
});
将 $(e.target) 替换为 $(this) 您的问题得到解决。
demo http://jsfiddle.net/sua0yp4y/8/