javascript - 添加项目和 "refreshing"脚本来设置样式时，Jquery Mobile 复选框列表不会更新

Question

在 JQuery Mobile 中添加复选框列表非常容易，脚本会自动设置/更改以下 html 的样式并为其提供功能:

<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>

然而，事实证明，更改现有列表很困难，因为必须调用这个不适合我的刷新方法:

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

这是我的列表，其中尝试将项目添加到 JsFiddle 中的列表失败:

http://jsfiddle.net/b92anmqw/

请大家帮帮我，谢谢!

Answer 1

别 panic 。由于您使用的是 jQuery Mobile，这也可以非常容易地完成。首先，您应该设置页面的结构:

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

您应该将新复选框附加到控制组容器内:

$(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");
});

顺便说一句，您也可以使用 $(document).on("pagecreate") 而不是 $(document).ready。