javascript - 加载 DOM 后无法读取动态创建的复选框的属性

Question

我有一个应用程序，允许用户选择一门或多门类(class)。用户可以选择保存所选类(class)并稍后返回以完成该过程。当/如果用户返回时，我重新创建复选框列表。然后，我尝试找到该 div 中的所有输入复选框。我将其记录到控制台，它返回一个空集合。如何获取复选框属性？

填充了复选框的空 div。

 <div class="courseList applyBackgroundColor" id="UserCheckList">

 </div>

我正在发布帖子并使用结果创建动态文本框。

var createCourse = function(studentID)
{ 
  var StudentCourseList = '<table><tbody>';
   do post here

 $.each(result, function (index, item) {
     StudentCourseList  += '<td valign="top" style="width:1%" id=td.ck.' +  
     item.ID + '><div class=""><input type="checkbox" class="checkbox"  
     id="'+ item.ID + '" value="' + item.ID + '" /></div></td>
    <td valign="top" style="width:30%;padding:.25em;" id="' + item.ID +
     '"><span id="span.' + item.ID + '" title="' + item.Description + '">' 
     + item.Description             +'</span></td>';

}

   $('#UserCheckList').html(StudentCourseList );
}

页面加载时检查是否有学生 ID。

$(function(){
  var studentID = $('#studentID').val(); 
  if(studentID !==''){
    createCourse(studentID);
    var listCheckUsers = $('.courseList').find('input[type=checkbox]');
    console.log(listCheckUsers);

如果我在 listCheckUsers 旁边放置断点并对其进行调试，控制台中显示的结果如下所示:

      Object[input#MAC201.checkbox attribute value = "MATH 201",   
      input#ENC101.checkbox attribute value = "ENGLISH 101",....]
  }  

没有断点，我看到一个空对象

  Object[]
});

更新:添加确切的 JQuery 消息。

//This is shown when I do not use a breakpoint.

1.  jQuery.fn.init[0]
  1.    context: document
  2.    length: 0
  3.    prevObject: jQuery.fn.init[1]
    1.  0: div#UserCheckList.Display
    2.  context: document
    3.  length: 1
    4.  selector: "#UserCheckList"
    5.  __proto__: jQuery[0]
  4.    selector: "#UserCheckList input[type=checkbox]"
  5.    __proto__: jQuery[0]

Answer 1

您在表格元素中缺少 className courseList。

更新我使用 setTimeout 模拟了 Ajax 请求。您可以删除 setTimeout 代码并放置 Ajax 请求。返回数据后，使用数据运行回调函数。

function getResults(studentID, callback) {

  // Async call.
  setTimeout(function() {
    // Replace generator with Ajax call
    var result = [];
    for (var i = 0; i < 10; i++) {
      var item = {
        ID: i,
        "Description": "Result #" + i
      };
      result.push(item);
    }
    // Run this when data returns.
    callback(result);
  }, 3000);

  // Show loading while we wait.
  $('.UserCheckList').html('loading...');
}

function showResults(result) {
  var StudentCourseList = '<table class="courseList"><tbody>';

  $.each(result, function(index, item) {
    StudentCourseList += '<tr><td valign="top" style="width:1%" id=td.ck.' +
      item.ID + '><div class=""><input type="checkbox" class="checkbox"\
     id="' + item.ID + '" value="' + item.ID + '" /></div></td>\
    <td valign="top" style="width:30%;padding:.25em;" id="' + item.ID +
      '"><span id="span.' + item.ID + '" title="' + item.Description + '">' + item.Description + '</span></td></tr>';

  });

  $('.UserCheckList').html(StudentCourseList);
}


$(function() {
      var studentID = $('#studentID').val();
      if (studentID !== '') {
        getResults(studentID, function(results) {
          // callback when results are complete.
          showResults(results);

          var listCheckUsers = $('.courseList').find('input[type=checkbox]');
          console.log(listCheckUsers);
        });
      }
}); //end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="UserCheckList"></div>