title: Access Dynamically Created Data Tag in Single Page Application
body: <p>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.</p>
  
  <p>The backslash in the $(\#documents) is there because this is a kendoUI-template that is being called by my route function.</p>
  
  <p>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!!!</p>
  
  <pre><code>   function buildTreeView(tree, jobCode){
         var treeHtml = "&lt;div class='row'&gt;&lt;div class='col-xs-12 col-sm-8 col-sm-offset-2'&gt;&lt;div class='panel-group'&gt;&lt;div class='panel panel-default'&gt;&lt;div class='panel-heading'&gt;&lt;h3 class='text-center'&gt;View or Download Documents&lt;/h3&gt;&lt;/div&gt;&lt;div class='panel-body'&gt;&lt;ul class='list-group'&gt;";
          for(var i =0;i &lt; tree.length;i++){
            if(typeof tree[i] === 'object'){
              for(var ind = 0;ind &lt; tree[i].length; ind++){
                  //another element will be populated here
              }
            }else{
              treeHtml += "&lt;li class='list-group-item viewDoc' data-docName='"+tree[i]+"' data-jobCode='"+jobCode+"'&gt;"+tree[i]+"&lt;/li&gt;";
            }
          }
          treeHtml += "&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;";
          $('\#documents').append(treeHtml);
  }
  
  $(document).on("click", ".viewDoc", function(){
      var docName = $(this).data('docName');
      var jobCode = $(this).data('jobCode');
      console.log(docName);
      console.log(jobCode);
  });
  </code></pre>