Доступ к динамически созданному тегу данных в приложении с одной страницей

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

UPDATE: добавлена ​​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});