javascript - 更新時にチェックボックスが再描画されない

Question

チェックボックス付きのリストビューを持つアプリがあります。実際にリストビューを描画するメソッドは次のとおりです。(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 チェックボックスとしてレンダリングされます。

誰かが理由を教えてもらえますか?