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

Cannot Read Property of Dynamically Created Checkbox after DOM is Loaded

本文关键字：创建 复选框 属性 动态 读取 DOM 加载      更新时间：2023-09-26

我有一个应用程序，允许用户选择一门或多门课程。用户可以选择保存所选课程，稍后再回来完成该过程。当用户返回时，我会重新创建复选框列表。然后，我尝试在该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]

你在表元素中缺少类名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>

相关文章：