动态控制组和复选框没有样式

Question

所以我试图将动态内容直接加载到我的复选框容器中(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>');

复选框都已填充,但未应用jQuery样式.

根据文档,我需要做的是调用此函数来更新复选框样式...

$("input[type='checkbox']").checkboxradio("refresh");

虽然这不起作用......任何想法我做错了什么？

Answer 1

当动态地向控制组附加复选框或单选按钮时,您将处理两个jQuery Mobile小部件,.checkboxradio()以及.controlgroup().

添加新元素后,应使用jQuery Mobile CSS创建/更新/增强/样式化两者.

在最新的稳定版本和RC版本中实现这一点的方法不同,但方法是相同的.

jQuery Mobile 1.2.x - 1.3.x(稳定版)

将复选框/单选按钮附加到静态或动态控制组后,.checkboxradio()应首先调用以增强复选框/单选按钮标记,然后.controlgroup("refresh")再调整控制组 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");

演示

Answer 2

首先尝试自己的静态演示代码:

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

正如我在评论中提到的那样,他们只使用一个字段集.
如果这样可行,则调整脚本以动态生成相同的标记,然后刷新它们

$("input[type='checkbox']").checkboxradio("refresh");

如果这将与他们的代码一起使用,您将知道标记中有错误.如果没有,则刷新功能出错.(我知道这不是最终的解决方案,但你有时需要做一些调试:)

编辑:
发现类似的问题,通过使用Page()
JQM FAQ SO Question解决

Answer 3

尝试 $("#<id of fieldset controlgroup>").trigger("create");

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