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

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

更改您的函数，使其使用 .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});

Answer 2

您无法访问这些数据，因为数据属性 "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

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

Access Dynamically Created Data Tag in Single Page Application

javascript

jquery

single-page-application

kendo-template