dynamic控制组和checkbox无风格
所以我试图加载dynamic内容直接到我的checkbox容器（group_checkboxes）
<div id='group_checkboxes' data-role="fieldcontain"> </div> 这是我运行的声明来填充容器：
$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');
checkbox全部填充，但jQuery样式不适用。
根据文档，我需要做的是调用此函数来更新checkbox样式…
$("input[type='checkbox']").checkboxradio("refresh");
那不行，虽然…任何想法我做错了什么？
首先尝试自己的静态演示代码：
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <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> </div>
正如我在评论中提到的那样，他们只使用了一个字段集。
如果这个工作，然后调整您的脚本dynamic生成相同的标记，然后刷新它们
$("input[type='checkbox']").checkboxradio("refresh");
如果这将与他们的代码一起工作，你会知道你有错误的标记。 如果不是，则该刷新function有错误。 （我知道这不是最终的解决scheme，但你必须做一些debugging有时:)
编辑：
发现类似的问题，通过使用Page()
JQM常见问题
SO问题
将checkbox或单选button附加到控件组时，您将处理两个jQuery Mobile小部件.checkboxradio()和.checkboxradio() .controlgroup() 。
添加新元素后，都应该使用jQuery Mobile CSS创build/更新/增强/样式化。
最新的稳定版本和RC版本的实现方法是不同的，但方法是一样的。
jQuery Mobile 1.2.x – 1.3.x（稳定版本）
将checkbox / 单选button附加到静态或dynamic控制组之后 ，应首先调用.checkboxradio()以增强checkbox / 单选button标记，然后调用.checkboxradio() .controlgroup("refresh")重新设置controlgroup div。
$("[type=checkbox]").checkboxradio(); $("[data-role=controlgroup]").controlgroup("refresh");
演示
jQuery Mobile 1.4.x
这里唯一的区别是元素应该被附加到.controlgroup("container")
$("#foo").controlgroup("container").append(elements);
然后使用.enhanceWithin()来增强控制组和其中的所有元素。
$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");
演示
尝试使用$("#<id of fieldset controlgroup>").trigger("create");
尝试
$('input:checkbox').checkboxradio('refresh');
<!DOCTYPE HTML> <html> <head> <title>checkbox</title> <link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script> <script type="text/javascript"> var myArray = []; $(document).ready(function() { // put all your jQuery goodness in here. myArray[myArray.length] = 'Item - 0'; checkboxRefresh(); }); function checkboxRefresh(){ var newhtml = "<fieldset data-role=\"controlgroup\">"; newhtml +="<legend>Select items:</legend>" ; for(var i = 0 ; i < myArray.length; i++){ newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ; newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>"; } newhtml +="</fieldset>"; $("#checkboxItems").html(newhtml).page(); //$('input').checkboxradio('disable'); //$('input').checkboxradio('enable'); //$('input').checkboxradio('refresh'); //$('input:checkbox').checkboxradio('refresh'); $("input[type='checkbox']").checkboxradio("refresh"); $('#my-home').page(); } $('#bAdd').live('click', function () { myArray[myArray.length] = 'Item - ' + myArray.length; checkboxRefresh(); }); </script> </head> <body> <div data-role="page" data-theme="b" id="my-home"> <div id="my-homeheader"> <h1 id="my-logo">checkbox</h1> </div> <div data-role="content"> <div id="checkboxItems" data-role="fieldcontain"></div> <fieldset class="ui-grid-b"> <div data-role="controlgroup" data-type="horizontal"> <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a> </div> </fieldset> </div> </div> </body> </html>
它适用于我。 任何想法为什么？
对我来说，答案是：
$("input[type='checkbox']").checkboxradio();
对我来说，解决的办法是删除整个字段集，然后用我想添加的新项目replace一个新.trigger('pagecreate');然后调用.trigger('pagecreate'); 方法在整个页面上。 这不是最有效的解决scheme，但这是唯一一个适用于我的案例。
