css - jQuery Mobile Radio 字段集具有不同的样式

Question

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

存放字段集的 Div

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

append 单选按钮

$('#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 都没有被应用。

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

参见此处:jQuery Mobile does not apply styles after dynamically adding content

更新

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...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/