Access Dynamically Created Data Tag in Single Page Application

Question

I have a single page application that is dynamically populating a div with list items that will call a function on click. I am trying to populate the data-tag dynamically and then access that within the appended list item.

The backslash in the $(\#documents) is there because this is a kendoUI-template that is being called by my route function.

The build tree function is being called within an Ajax success function once the data has been retrieved from the server. Any insight or help is appreciated!!!

   function buildTreeView(tree, jobCode){
       var treeHtml = "<div class='row'><div class='col-xs-12 col-sm-8 col-sm-offset-2'><div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h3 class='text-center'>View or Download Documents</h3></div><div class='panel-body'><ul class='list-group'>";
        for(var i =0;i < tree.length;i++){
          if(typeof tree[i] === 'object'){
            for(var ind = 0;ind < tree[i].length; ind++){
                //another element will be populated here
            }
          }else{
            treeHtml += "<li class='list-group-item viewDoc' data-docName='"+tree[i]+"' data-jobCode='"+jobCode+"'>"+tree[i]+"</li>";
          }
        }
        treeHtml += "</ul></div></div></div></div></div>";
        $('\#documents').append(treeHtml);
}

$(document).on("click", ".viewDoc", function(){
    var docName = $(this).data('docName');
    var jobCode = $(this).data('jobCode');
    console.log(docName);
    console.log(jobCode);
});

score 0 · Answer 1 · edited Nov 06 '15 at 16:08

0

Change your function so it sets data using .data(key,value). See https://api.jquery.com/data/

function buildTreeView(tree, jobCode){
    $('\#documents').append("<div class='row'><div class='col-xs-12 col-sm-8 col-sm-offset-2'><div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h3 class='text-center'>View or Download Documents</h3></div><div class='panel-body'><ul class='list-group'></ul></div></div></div></div></div>");
    for(var i =0;i < tree.length;i++){
      if(typeof tree[i] === 'object'){
        for(var ind = 0;ind < tree[i].length; ind++){
            //another element will be populated here
        }
      }else{
        var li = $('\#documents').find('ul:last()').append("<li class='list-group-item viewDoc'>"+tree[i]+"</li>");
        $(li).data("docName",tree[i]);
        $(li).data("jobCode",jobCode);
      }
    } 
                // ---- EDITED ----//

    var li = $('\#documents').find('ul:last()').append("<li class='list-group-item viewDoc' id='docIndex"+i+"'>"+tree[i]+"</li>");
    $('\#docIndex'+i).data({"docName":tree[i], "jobCode":jobCode});

edited Nov 06 '15 at 16:08

Kyle Suhan

40
6

answered Nov 06 '15 at 14:06

ahervin

461
2
15

ahervin, thank you for your response. Your code actually led me to another solution that will probably be beneficial in the future. However, CodeLama's solution was the root of my problem.. – Kyle Suhan Nov 06 '15 at 15:04
@KyleSuhan Yes not sure whether my code would work now though as I was setting the data with the capitalisation. – ahervin Nov 06 '15 at 15:10
It would work because when you set the key it normalizes the key to data-lowercase. I'll add an edit to show how I got your code to work prior to finding the case problem. – Kyle Suhan Nov 06 '15 at 16:00
Strange how declaring var li then setting the data on that wouldn't work ... or would it? I've had this issue many times before – ahervin Nov 06 '15 at 16:09

score 0 · Accepted Answer · edited May 23 '17 at 10:27

You are not able to access these data because the data attribute "docName" and "jobName" was normalized to lowercase.

eg the html then looks like this:

<li class="list-group-item viewDoc" data-docname="something" data-jobcode="something">something</li>

Look here for better answer:

In any case this will work:

$(document).on("click", ".viewDoc", function(){
    var docName = $(this).data('docname');
    var jobCode = $(this).data('jobcode');
    console.log(docName);
    console.log(jobCode);
});

UPDATE: added jsfiddle

Access Dynamically Created Data Tag in Single Page Application

2 Answers2