异步加载数据时jQuery Mobile Checkbox样式不生效问题

你判断的加载时序问题方向完全正确，核心问题有两个：

• jQuery Mobile 默认仅在页面首次加载时扫描原生DOM，自动给表单元素加上美化所需的样式类、配套包装结构，完成组件增强。你通过接口异步拉取数据后动态插入的checkbox，错过了首次自动初始化的流程，自然不会带上预设的jQuery Mobile样式。
• 你当前的DOM插入写法本身有缺陷：每次追加的都是未闭合的标签片段（比如先插入<fieldset id="xxx">），浏览器会自动把不完整的标签补全闭合，后续你再通过id选中元素追加内部内容时，实际DOM嵌套结构已经和你预期的不一致；加上你用的trigger("create")是jQuery Mobile早期版本的旧方法，1.4版本之后动态组件的增强逻辑已经调整，这种触发方式无法正确初始化新插入的复选框组件。

1. 调整DOM拼接逻辑，不要拆分插入未闭合的标签片段，把每个完整节点的HTML字符串拼接完成后一次性插入，避免浏览器自动补全标签打乱结构。
2. 所有动态内容插入完成后，针对新添加的checkbox元素，显式调用jQuery Mobile的checkboxradio组件初始化方法完成样式增强，不需要手动逐个添加样式类。

将原有循环生成DOM的部分替换为如下写法即可：

function showLearners(learners) {
  // 分类教职工和学生的逻辑保持原有逻辑不变
  var learnersObj = {staff:[], 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'];

  roles.forEach(function(role) {
    var roleContainer = $('#' + role);
    var rowCount = 1;
    // 按每3个一组遍历当前角色的人员，替代原有的内层循环手动递增i的逻辑，减少边界错误
    for (var i = 0; i < learnersObj[role].length; i+=3) {
      // 一次性拼接当前行完整的fieldset结构，不拆分插入片段
      var fieldsetHtml = `<fieldset id="checkRow${role}${rowCount}" class="ui-grid-b">`;
      // 生成当前行最多3个复选框
      for (var j=0; j<3; j++) {
        var curIndex = i + j;
        if (curIndex >= learnersObj[role].length) break;
        var learnerID = learnersObj[role][curIndex][0];
        fieldsetHtml += `
          <div id="checkRow${role}${rowCount}-${cols[j]}" class="ui-block-${cols[j]}">
            <input type="checkbox" name="learner" id="learner${role}${curIndex}" data-mini="true"/>
            <label for="learner${role}${curIndex}">${learnerID}</label>
          </div>
        `;
      }
      fieldsetHtml += '</fieldset>';
      // 一次性插入完整的行结构
      roleContainer.append(fieldsetHtml);
      rowCount++;
    }
  });

  // 所有DOM插入完成后，统一初始化新添加的复选框组件
  $('input[type="checkbox"]').checkboxradio();
  // 刷新网格布局增强效果
  $('.ui-grid-b').grid();

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

如果后续需要对已经初始化过的jQuery Mobile组件做更新，不要使用trigger("create")，统一调用对应组件的官方方法加refresh参数即可，比如修改复选框选中状态后执行$('input[type="checkbox"]').checkboxradio('refresh')就能同步更新样式状态。

内容的提问来源于stack exchange，提问作者DJP