【发布时间】：2022-08-02 18:39:14
【问题描述】：
在我的学校使用谷歌应用程序脚本构建一个简单的工具，以帮助收集学生工作的照片证据并将其集中保存，以便所有教学人员都可以访问它（可能已经有一个应用程序可以做到这一点，但我认为它可能是一种学习更多编码的简单且有用的方法）。
我遇到的问题是异步加载的复选框（基于学生电子表格中的数据）没有设置样式。如果我使用我的动态代码生成的样式对一些示例复选框进行硬编码，则样式将完美应用 (see this screenshot to see the difference)
这是我用来执行此操作的代码位...
触发生成复选框的函数
<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
showLearners 脚本这嵌入在页面的末尾。
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 演示 (here) 匹配的输出（仅显示一行）：
<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()) 可以解决这个问题，但它没有。
提前谢谢任何帮助
-
我试过你的代码，硬编码的和动态生成的网格看起来都一样：docs.google.com/spreadsheets/d/…
-
谢谢@johndee31415。我查看了您的代码，发现您使用的是不同版本的 JQuery 移动版 - 我只是使用由 google 托管的最新版本（Jquery 的 2.2.4，而不是您拥有的 3.6）。我尝试使用您包含的 Jquery 样式表和脚本，但出现错误 - \"Uncaught TypeError: Cannot read properties of undefined (reading \'concat\')\"
-
你的
<style>s 在哪里？我会提醒你，你在j循环中增加i，如果你用完learners[i]怎么办？ -
thx WizEd - 递增 i 现在已排序，原始问题已修复