添加项目时,Jquery Mobile复选框列表不会更新,并且"刷新"设计风格的脚本

时间:2016-12-30 23:38:54

标签: javascript jquery html jquery-mobile mobile

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

请帮帮我,谢谢!

1 个答案:

答案 0 :(得分:0)

不要惊慌失措。当您使用jQuery Mobile时,这也可以非常轻松地完成。首先,您应该设置页面的结构:

server()

您应该在控制组容器中附加新复选框:

arrival()

顺便说一句,您也可以使用<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"); });