jQuery Mobile的无线字段集都有不同的造型 [英] jQuery Mobile Radio fieldset has different styling
问题描述
这两个jQuery Mobile的复选框有不同的风格，但我相信我的非常相似的方式创建它们。该机顶盒我动态追加，那里的底盒硬codeD。有谁知道这是为什么这种差异在样式？
事业部举办字段集
＆LT;字段集ID =surveyViewer数据角色=controlgroup＆GT;
＆LT; /字段集＆GT;
追加单选按钮
$（'＃surveyViewer'）追加（'＆LT;传奇＆GT;调查preVIEW：LT; /传说＆GT;＆LT;输入类型=电台NAME =选项ID =1值=1/＆GT;＆LT为=标签＆GT; 1＆LT; /标签＆gt;＆LT;输入类型=电台NAME =选项ID =2值= 2/＆GT;＆下;标签=2→2＆下; /标签＆gt;'）;
此行刷新造型：
$（'＃surveyViewer'）触发（创造）;
$（输入[类型='无线电']）checkboxradio（刷新）。
所有你的CSS，当你动态加载的前两名没有被应用。
添加 .trigger（创造），获取内容添加到元素。
在这里看到：<一href=\"http://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content\">jQuery移动后动态添加内容不适风格
更新
然而，如果你生成的内容通过新的标记的客户端或负载
Ajax和注入到一个页面，可以触发到创建事件
办理自动初始化包含在所有的插件
新标记。这可以任何元素（甚至在网页触发
DIV本身），为您节省了手动初始化每个插件任务
（列表视图按钮，选择，等等）。
例如，如果HTML标记块（说登录表单）装
通过阿贾克斯，触发创建事件来自动变换
所有的部件包含（在这种情况下，输入和按钮）插入
增强版本。在code为这种情况将是：$（...包含的小部件新的标记）.appendTo（的.ui页）.trigger（创造）;更新＃2
// HTML
＆LT;一个ID =myButton的的href =数据角色=按钮数据主题=E＆gt;添加广播LT; / A＆GT;＆LT; DIV ID =radiodiv1＆GT;
＆所述;字段集的id =surveyViewer数据角色=controlgroup＆GT;＆下; /字段集＆GT;
＆LT; / DIV＆GT;// JS
$（#myButton）.bind（点击，功能（事件，UI）{ $（＃surveyViewer）追加（'＆LT;传奇＆GT;调查preVIEW：LT; /传说＆GT;＆LT;输入类型=电台NAME =选项ID =1值=1/ ＆GT;＆LT;标签=1＆GT; 1＆LT; /标签＆gt;＆LT;输入类型=电台NAME =选项ID =2值=2/＆GT;＆LT;标签=2 →2＆下; /标签＆gt;'）; $（＃radiodiv1）的触发器（创造）。}）;我创建一个的jsfiddle以说明中的溶液。我所做的这一切都在我的iPad（不客气），因此，如果这对你的作品，请至少它标记为正确的答案笑。这里的链接（基于通过点击一个按钮添加单选按钮）
工作示例： http://jsfiddle.net/nsX2t/
These two jQuery Mobile checkboxes have different styling, however I believe I am creating them in very similar ways. The top boxes I am appending dynamically, where as the bottom box is hardcoded. Does anybody know why this is this discrepancy in styles?
Div to hold fieldset
<fieldset id="surveyViewer" data-role="controlgroup"> </fieldset>Appending radio buttons
$('#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>');This line to refresh styling:
$('#surveyViewer').trigger("create"); $("input[type='radio']").checkboxradio("refresh");解决方案All of your CSS is not being applied when you are dynamically loading the top two.
Add
.trigger("create")on the element that gets the content added to.See here: 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" );UPDATE #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"); });I created a JSfiddle to illustrate a solution. I did all this on my iPad (you're welcome) so if this works for you, PLEASE at least mark it as the correct answer lol. Here's the link (based on adding the radio buttons via a button click)
WORKING EXAMPLE: http://jsfiddle.net/nsX2t/
这篇关于jQuery Mobile的无线字段集都有不同的造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
