0

我有一个应用程序，它有一个带有复选框的列表视图。这是实际绘制列表视图的方法。（panelListId 是包含列表视图的 UL 标记的 ID。）

/**
 * @param panelListId
 * @param panelPersons
 */
function _buildConfirmAttendanceEntries(panelListId, panelPersons){
    //list the persons on that case
    panelPersons.sort(function(left, right){
        var leftSeqnum = left.originals.panelSequenceNumber;
        var rightSeqnum = right.originals.panelSequenceNumber;

        return leftSeqnum - rightSeqnum;
    });

    var from = -19;
    var to = 0;
    var result = "";
    panelPersons.forEach(function(panelPerson){
        var seqNum = panelPerson.originals.panelSequenceNumber;
        var needsDivider = false;
        while(to < seqNum ){
          from += 20;
          to += 20;
          needsDivider = true;
        }

        if(needsDivider){
          result += "<li data-role=list-divider>" + from + "-" + to + "</li>";
        }

        var listItem = "<li style='min-height: 32px; max-height: 90px; padding-left: 40px;' class='attendee'>";

        var personId = panelPerson.originals.personId;
        var nameId = seqNum + ". ";
        nameId += _formatPersonName(panelPerson);
        nameId += "<input type='hidden' value='" + personId + "'/>";
        nameId += " (" + personId + ")";

        listItem += _buildListContent(panelListId, personId, nameId, panelPerson.originals.awol);
        listItem += "<\li>";

        result += listItem + "\n";
    });

    return result;
}

在第一次抽奖时，我这样称呼它，一切正常：

    result += "  <ul id='" + panelListId + "' data-role='listview' data-theme='e' data-inset='true' data-filter='true'>\n"

    result += _buildConfirmAttendanceEntries(panelListId, panel.originals.panelPersons);
    result += "  </ul>\n"

当有人单击列表视图时，我删除列表中的所有条目并添加子列表的所有条目。当他们单击子列表时，我使用以下代码重新创建原始列表：

/**
 * @param panelListId
 */
function _refreshPanel(panelListId){
  var parts = panelListId.split("-");
  var panelId = parts[1];
  var doneCallback = function(jsonText){
    var panelList = jQuery.parseJSON(jsonText);
    panelList.forEach(function(panel){
      if(panelId == panel.originals.panelId){
        var listContents = _buildConfirmAttendanceEntries(panelListId, panel.originals.panelPersons);
        jQuery("#" + panelListId).empty().append(listContents).listview( "refresh" );
      }
    });
    var checkboxes = jQuery(".attendCheckbox");
    checkboxes.checkboxradio( "refresh" );
  };

  var failCallback = function(){
    console.log( "error:" + getUnseatedPanelsUrl);
  };

  _loadPanels(doneCallback, failCallback);
}

但这一次，复选框不会呈现为 jquery-mobile 组件，而是呈现为常规的旧 HTML 复选框。

有人能告诉我为什么吗？

4

0 回答 0