css – jQuery Mobile Radio fieldset具有不同的样式

2024年1月2日 195次阅读

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

Div保留fieldset

<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");

最佳答案 当您动态加载前两个CSS时,不会应用所有CSS.

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

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

UPDATE

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/

点赞