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

Question

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

$(\#documents) 中有反斜杠是因为这是一个 kendoUI 模板，我的路由函数正在调用它。

一旦从服务器检索到数据，就会在 Ajax 成功函数中调用构建树函数。任何见解或帮助表示赞赏！！！

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

Answer 1

您无法访问这些数据，因为数据属性“docName”和“jobName”已标准化为小写。

例如，html 如下所示：

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

在这里寻找better answer：

无论如何这都会起作用：

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

更新：添加jsfiddle

Answer 2

更改您的函数，使其使用 .data(key,value) 设置数据。见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});