Checkbox not getting redrawn on refresh

Question

I have an app that has a listview with checkboxes on it. Here is the method that actually draws the listview. (panelListId is the ID of the UL tag that contains the listview.)

/**
 * @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;
}

On the first draw, I call it this way and everything works fine:

    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"

When someone clicks on the listview, I remove all of the entries in the list and add all of the entries for the sub-list. When they click on the sub-list, I re-create the original list using this code:

/**
 * @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);
}

But this time, checkboxes don't get rendered as jquery-mobile components, but as regular old HTML checkboxes.

Can someone tell me why?