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");

http://jsfiddle.net/YKvR3/36/

尝试

 $('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,但这是唯一一个适用于我的案例。