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

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

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

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

• javascript
• jquery

• this means that you are using the click function before the content was on the page .. you have to append the string before using the click method ... – Hussein Nazzal Commented Jun 15, 2013 at 6:16

4 Answers 4

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()

$('.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

http://jsfiddle/uvgW4/1/

You can do

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

Use event delegation since it looks like your adding this dynamically.

Try this:

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

if you are using jquery 1.9

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

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 Mustache also

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

});

Refer this jsFiddle Link for demo