Флажок не перерисовывается при обновлении

Question

У меня есть приложение, в котором есть просмотр списка с флажками. Вот метод, который на самом деле рисует представление списка. (panelListId - это идентификатор тега UL, который содержит представление списка.)

/**
 * @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.

Может кто-нибудь сказать мне, почему?