Javascript 在单页应用程序中访问动态创建的数据标记

我有一个单页应用程序，它用列表项动态填充div，这些列表项将在单击时调用函数。我正在尝试动态填充数据标记，然后在附加的列表项中访问它

$\documents中有反斜杠，因为这是我的路由函数正在调用的kendoUI模板

一旦从服务器检索到数据，就会在Ajax成功函数中调用buildtree函数。感谢您的帮助

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

---

更改函数，使其使用.datakey，value设置数据。看

---

您无法访问这些数据，因为数据属性docName和jobName已规范化为小写

例如，html如下所示：

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

---

更新：添加了

ahervin，感谢您的回复。您的代码实际上让我找到了另一种解决方案，这种解决方案将来可能会有所帮助。然而，CodeLama的解决方案是我问题的根源。@KyleSuhan是的，我不确定我的代码现在是否可以工作，尽管我正在用大写字母设置数据。它可以工作，因为当你设置密钥时，它会将密钥标准化为小写字母。我将添加一个编辑，以显示在发现案例问题之前，我是如何让您的代码工作的。奇怪的是，声明var li然后在上面设置数据将无法工作。。。还是会？我以前有过很多次这样的问题

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

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