Question

我有一个应用程序，允许用户选择一个或多个课程。用户可以选择保存所选择的课程并稍后返回以完成该过程。当/如果用户返回时，我重新创建复选框列表。然后，我尝试找到该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请求放在适当的位置。返回数据时，使用数据运行回调函数。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: