异步加载数据时不应用复选框样式

Question

使用谷歌应用程序脚本在我的学校构建一个简单的工具，以帮助收集学生作业的照片证据并集中保存，以便所有教学人员都可以访问它（可能已经有一个应用程序可以做到这一点，但我认为它可能是一个非-学习更多编码的复杂而有用的方法）。

我遇到的问题是异步加载的复选框（基于学生电子表格中的数据）没有设置样式。如果我使用动态代码生成的样式对一些示例复选框进行硬编码，则样式将完美应用（请参阅此屏幕截图以了解差异）

这是我用来执行此操作的代码片段...

触发生成复选框的函数

<script>
  window.addEventListener('load', function() {
    console.log('Page is loaded');
  });
</script>

$(function() {
  google.script.run.withSuccessHandler(showLearners)
      .getLearnerData();
});
//Please note the getLearnerData() code works fine, so won't show that

显示学习者脚本 这嵌入在页面末尾。

function showLearners(learners) {
  //split learners into staff and students

  var learnersObj = {staff:[], students:[]}
  //var staff = [];
  //var students = [];
  for (var i=0; i<learners.length; i++) {
    if (learners[i][3] === "student" || learners[i][3] === '') {
      learnersObj.students.push(learners[i]);
    } else {
      learnersObj.staff.push(learners[i])
    }
  }

  var roles = ["staff", "students"];
  var cols=['a','b','c'];
  var r = 0;

  //This loop creates checkboxes for students and then staff
  while(r < roles.length) {
    var role = roles[r];
    var rowCount = 1;
    var learnerCheckboxes = $('#' + role);
  
    //This loop creates the fieldset groups
    for (var i = 0; i < learnersObj[role].length; i++) {
      learnerCheckboxes.append("<fieldset id=\"checkRow" + role + rowCount + "\">")
      var fieldSet = $("#checkRow" + role + rowCount).addClass("ui-grid-b");

      //This loop creates 3 checkboxes in each grid of the fieldset
      for (var j = 0; j < cols.length; j++) {
        var learnerID = learnersObj[role][i][0];
        fieldSet.append("<div id=\"checkRow" + role + rowCount + "-" + cols[j] + "\">");
        var div = $("#checkRow" + role + rowCount + "-" + cols[j]).addClass("ui-block-" + cols[j]);
        div.append(
            "<input type=\"checkbox\" name=\"learner\" id=\"learner" + role + i + "\"  data-mini=\"true\"/>" +
            "<label for=\"learner" + role + i + "\">" + learnerID + "</label>"
          );
        if (j < (cols.length-1)) {
          i++;//we're in the inner loop, so have to manually increment i, but not if we're near the end
        }
        if (i >= learnersObj[role].length) {
          break;
        }
      }
      fieldSet.trigger("create");
      rowCount++;
    }
    r++;
  }

  $('#loader').hide();
  $('#photoForm').show();
  $('#staff').hide();
  console.log("Learners loaded")
} //end showLearners()

此代码生成下面的输出（仅显示一行），与 jquery 演示相匹配（此处）：

<fieldset id="checkRow1" class="ui-grid-b">
  <div id="checkRow1-a" class="ui-block-a">
    <input type="checkbox" name="learner" id="learner0" data-mini="true">
    <label for="learner0">David</label>
  </div>
  <div id="checkRow1-b" class="ui-block-b">
    <input type="checkbox" name="learner" id="learner1" data-mini="true">
    <label for="learner1">Dominic</label>
  </div>
  <div id="checkRow1-c" class="ui-block-c">
    <input type="checkbox" name="learner" id="learner2" data-mini="true">
    <label for="learner2">Eliza</label>
  </div>
</fieldset>

我猜测问题与时间有关 - 即因为这些复选框是在页面加载后添加的，所以嵌入的 jquery-mobile 样式表中的一些样式没有被应用。我本来希望使用 jquery 函数添加样式（.addclass()）能够解决这个问题，但事实并非如此。

提前感谢您的帮助

Answer 1

看起来添加

fieldSet.trigger("create")

可以正确应用 CSS 样式。您可以检查这个 JSFiddle：https://jsfiddle.net/zpLbr26y/21/