添加项目和“刷新”时,Jquery Mobile复选框列表不会更新设计风格的脚本 [英] Jquery Mobile checkbox-list does not update when adding items and "refreshing" the script to style it
问题描述
在JQuery Mobile中添加复选框列表非常容易,脚本会自动设置/更改以下html并赋予其功能:
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" );
这是我的列表,尝试将项目添加到JsFiddle的列表中失败:
请帮助我,谢谢!
推荐答案
不要惊慌。当您使用jQuery Mobile时,这也可以非常轻松地完成。首先,您应该设置页面的结构:
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,您也可以使用 $(文件).on(pagecreate )
而不是 $(文件).ready
。
BTW, you may also use $(document).on("pagecreate")
instead of $(document).ready
.
这篇关于添加项目和“刷新”时,Jquery Mobile复选框列表不会更新设计风格的脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!