jQuery Mobile Radio fieldset具有不同的样式

Question

这两个jQuery Mobile复选框有不同的样式，但我相信我是以非常相似的方式创建它们。我动态附加的顶部框，底部框是硬编码的。有谁知道为什么这种风格差异？

Div保留字段集

<fieldset id="surveyViewer" data-role="controlgroup">
  </fieldset>

附加单选按钮

$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

此行用于刷新样式：

$('#surveyViewer').trigger("create");
$("input[type='radio']").checkboxradio("refresh");

Answer 1

当您动态加载前两个CSS时，不会应用所有CSS。

在获取内容的元素上添加.trigger("create")。

见这里：jQuery Mobile does not apply styles after dynamically adding content

<强>更新

  

但是，如果您通过生成新标记客户端或加载内容   Ajax并将其注入页面，您可以触发create事件   处理其中包含的所有插件的自动初始化   新标记。这可以在任何元素（甚至是页面）上触发   div本身），为您节省了手动初始化每个插件的任务   （列表视图按钮，选择等）。

     

例如，如果加载了一个HTML标记块（比如一个登录表单）   通过Ajax，触发create事件自动转换   它包含的所有小部件（在这种情况下为输入和按钮）   增强版本。此方案的代码为：

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

更新＃2

// HTML
<a id="myButton" href="" data-role="button" data-theme="e">Add Radio</a>

<div id="radiodiv1">
<fieldset id="surveyViewer" data-role="controlgroup"></fieldset>
</div>

// JS 
$( "#myButton" ).bind( "click", function(event, ui) {

     $("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

     $("#radiodiv1").trigger("create");

});

我创建了一个JSfiddle来说明解决方案。我在iPad上做了所有这些（欢迎你），所以如果这对你有用，请至少把它标记为正确答案大声笑。这是链接（基于通过按钮点击添加单选按钮）

工作示例：http://jsfiddle.net/nsX2t/