Jquery Mobile checkbox-list does not update when adding items and “refreshing” the script to style it

问题

It is very easy to add a checkbox list in JQuery Mobile, the scripts automatically style/change the following html and give it functionality:

<fieldset data-role="controlgroup" id="liste" class="liste">

        <legend>Choose as many snacks as you'd like:</legend>

        <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">
        <label for="checkbox-1a">Cheetos</label>

        <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom">
        <label for="checkbox-2a">Doritos</label>

        <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom">
        <label for="checkbox-3a">Fritos</label>

        <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">
        <label for="checkbox-4a">Sun Chips</label>

</fieldset>

Changing an existing list proves difficult, however, as one has to call this refresh method that just doesn't want to work for me:

$(".selector").checkboxradio( "refresh" );  

Here is my list with the failed attempt to add an item to the list in JsFiddle:

http://jsfiddle.net/b92anmqw/

Please help me, thank you!

回答1:

Don't panic. As you are using jQuery Mobile, this also could be done very easy. First of all, you should set the structure of your page:

<div data-role="page" id="page-1">
  <div data-role="main" class="ui-content">
      ...here goes your fieldset
  </div>
</div>

You should append the new checkbox inside the controlgroup container:

$(document).on("pagecreate", "#page-1", function() {
    var item5 = $("<label for='checkbox-5a'>Flips</label><input type='checkbox' id='checkbox-5a'></input>"), 
        liste = $("#liste");
    liste.controlgroup("container").append(item5);
    $(item5[1]).checkboxradio();
    liste.controlgroup("refresh");
});

BTW, you may also use $(document).on("pagecreate") instead of $(document).ready.

来源：https://stackoverflow.com/questions/41404047/jquery-mobile-checkbox-list-does-not-update-when-adding-items-and-refreshing-t