4

这两个 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");

在此处输入图像描述

4

1 回答 1

2

当您动态加载前两个时，您的所有 CSS 都没有被应用。

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

见这里：jQuery Mobile 在动态添加内容后不应用样式

更新

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

例如，如果通过 Ajax 加载了 HTML 标记块（例如登录表单），则触发 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/

于 2012-09-09T03:24:18.537 回答