javascript - 单击时如何通过类名从锚标记中获取“id”的属性值？

Question

 $("#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>");

单击时如何通过类名“reportData”获取“id”的属性值？

编辑：单击不起作用..如果我使用 Live，则调用该函数...如何在实时函数中获取 reportData 的 ID

Answer 1

看看这段代码：

$(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 
});

完成使用 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证明工作

http://jsfiddle.net/uvgW4/1/

Answer 2

你可以做

$(document).on("click", ".reportDatan", function() {
    var id = this.id;
});

使用事件委托，因为它看起来像是您动态添加的。

Answer 3

尝试这个：

$('.reportDatan').click(function(){
$(this).attr('id');    
});

如果您使用的是 jquery 1.9

$('.reportDatan').click(function(){
$(this).prop('id');    
});

Answer 4

您在 jQuery 中的 HTML 字符串连接是错误的，看看这个具有实时功能的代码，或者如果您希望它可读，您也可以使用 JavaScript 模板Mustache引擎

HTML：

<div id="jqxTree-ReportGroups">
    <ul>
        <li>First</li>
    </ul>
</div>

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;
    });

});

请参阅此jsFiddle链接进行演示