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

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 都没有被应用。

在获取添加内容的元素上添加.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/