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

Question

我有一个允许用户 select 一门或多门课程的应用程序。用户可以选择保存 selected 课程并稍后回来完成该过程。 When/if 用户 returns，我重新创建了复选框列表。然后，我尝试在 div 中找到所有输入复选框。我将它记录到控制台，它 returns 是一个空集合。如何获取复选框属性？

用复选框填充的空 div。

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

 </div>

我正在执行 post 并使用结果创建动态文本框。

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

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

$(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

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

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

Cannot Read Property of Dynamically Created Checkbox after DOM is Loaded

javascript

asp.net-mvc-3

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

Cannot Read Property of Dynamically Created Checkbox after DOM is Loaded

javascript

asp.net-mvc-3

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