javascript 单击时如何通过类名从锚标记中获取“id”的属性值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17120591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the attribute value of "id" from the anchor tag by class name when its clicked?
提问by Ebenezar John Paul
$("#jqxTree-ReportGroups ul").append("<li id=" + [data[i].Id] + " item-checked='true' item-expanded='true' class='treeLi'>
<a class='report-tree-expand' href=''>+</a>
<a class='reportData' id='12345' href=''>" + [data[i].Name] + "</a></li>");
How to get the attribute value of "id" by class name "reportData" when its clicked?
单击时如何通过类名“reportData”获取“id”的属性值？
EDIT: click doesnt work.. If i use Live that function is getting called... How to do get the reportData's Id inside a live function
编辑：单击不起作用.. 如果我使用 Live，该函数将被调用...如何在实时函数中获取 reportData 的 Id
回答by Hussein Nazzal
Take a look at this Code:
看看这个代码：
$(document).on('click' , '.reportData' , function(){
var idProp= $(this).prop('id'); // or attr()
var idAttr = $(this).attr('id');
console.log('using prop = ' + idProp + ' , using attr = ' + idAttr);
console.log();
return false; // to prevent the default action of the link also prevents bubbling
});
done use live it has been deprecated (on requires jquery version 1.7 and above) but here is the code using live()
done use live 它已被弃用（需要 jquery 1.7 及以上版本）但这里是使用 live() 的代码
$('.reportData').live('click' , function(){
var idProp= $(this).prop('id'); // or attr()
var idAttr = $(this).attr('id');
console.log('using prop = ' + idProp + ' , using attr = ' + idAttr);
console.log();
return false; // to prevent the default action of the link also prevents bubbling
});
jsfiddle to prove working
jsfiddle 来证明工作
回答by tymeJV
You can do
你可以做
$(document).on("click", ".reportDatan", function() {
var id = this.id;
});
Use event delegation since it looks like your adding this dynamically.
使用事件委托，因为它看起来像是您动态添加的。
回答by Vinod
Try this:
试试这个：
$('.reportDatan').click(function(){
$(this).attr('id');
});
if you are using jquery 1.9
如果您使用的是 jquery 1.9
$('.reportDatan').click(function(){
$(this).prop('id');
});
回答by Venkat.R
Your concatenation of HTML String inside jQuery is wrong, take a look at this Code which has live function or if you want this to be readable, you can use JavaScript Template Engine Mustachealso
你里面的jQuery HTML字符串的级联是错误的，看看这个守则，具有实时功能，或者如果你想这是可读的，你可以使用JavaScript模板引擎Mustache也
HTML:
HTML：
<div id="jqxTree-ReportGroups">
<ul>
<li>First</li>
</ul>
</div>
jQuery:
jQuery：
$(document).ready(function () {
var yourLiID = 100;
var aValue = 'Report Data';
var yourLi = "<li id='" + yourLiID + "' item-checked='true' item-expanded='true' class='treeLi'>";
var yourAnchor = "<a class='report-tree-expand' href=''>Your Text</a> ";
var secondAnchor = "<a class='reportData' id='12345' href=''>" + aValue + "</a>";
var yourLiClose = '</li>';
$("#jqxTree-ReportGroups ul").append(yourLi + yourAnchor + secondAnchor + yourLiClose);
$('.reportData').live("click", function(){
var yourAnchorID = $(this).attr('id');
alert('yourAnchorID: ' + yourAnchorID);
return false;
});
});
Refer this jsFiddleLink for demo
请参阅此jsFiddle链接以获取演示
