Javascript 动态控制组和复选框无样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5663033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic controlgroup and checkboxes unstyled
提问by Eric Franklin
So I'm trying to load dynamic content straight into my checkbox container (group_checkboxes)
所以我试图将动态内容直接加载到我的复选框容器 (group_checkboxes)
<div id='group_checkboxes' data-role="fieldcontain">
</div>
This is the statement I'm running to populate the container:
这是我正在运行以填充容器的语句：
$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');
The checkboxes are all populated but the jQuery style is not applied.
复选框都已填充，但未应用 jQuery 样式。
According to the docsall I need to do is call this function to update the checkbox style...
根据文档，我需要做的就是调用此函数来更新复选框样式...
$("input[type='checkbox']").checkboxradio("refresh");
That doesn't work though... Any idea what I'm doing wrong?
但这不起作用......知道我做错了什么吗？
采纳答案by Damb
First try their own static demo code:
先试试自己的静态演示代码：
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
They are using just one fieldset as I mentioned in comments.
If this works, then adjust your script to generate the same markup dynamically and then refresh them
正如我在评论中提到的，他们只使用一个字段集。
如果可行，请调整您的脚本以动态生成相同的标记，然后刷新它们
$("input[type='checkbox']").checkboxradio("refresh");
If this will work with their code, you will know that you have error in markup. If not, there is an error with that refresh function. (I know it's not final solution but you have to do a bit of debugging sometimes :)
如果这适用于他们的代码，您就会知道您在标记中有错误。如果不是，则该刷新功能存在错误。（我知道这不是最终的解决方案，但有时您必须进行一些调试：）
Edit:
Found similar problems, solved by using Page()
JQM FAQ
SO Question
编辑：
发现类似问题，通过使用Page()
JQM FAQ SO Question解决
回答by Omar
When appending checkboxes or radio buttons to a controlgroupdynamically, you deal with two jQuery Mobile widgets, .checkboxradio()and .controlgroup().
动态地将复选框或单选按钮附加到控制组时，您需要处理两个 jQuery Mobile 小部件.checkboxradio()和.controlgroup().
Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.
一旦添加了新元素，都应该使用 jQuery Mobile CSS 创建/更新/增强/样式化。
The way to achieve this is different in latest stable versions and RC version, but the methods are the same.
在最新的稳定版本和RC版本中实现这一点的方式不同，但方法是相同的。
jQuery Mobile 1.2.x - 1.3.x (stable versions)
jQuery Mobile 1.2.x - 1.3.x（稳定版）
After appending checkbox/ radio buttonto either a static or dynamic controlgroup, .checkboxradio()should be called first to enhance checkbox/ radio buttonmarkup and then .controlgroup("refresh")to re-style controlgroupdiv.
追加后的复选框/单选按钮，以静态或动态controlgroup，.checkboxradio()应首先调用增强复选框/单选按钮标记，然后.controlgroup("refresh")重新风格controlgroup股利。
$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");
jQuery Mobile 1.4.x
jQuery 移动版 1.4.x
The only difference here is elements should be appended to .controlgroup("container")
这里唯一的区别是元素应该附加到 .controlgroup("container")
$("#foo").controlgroup("container").append(elements);
and then enhance both controlgroupand all elements within it, using .enhanceWithin().
然后同时提高controlgroup以及其中的所有元素，使用.enhanceWithin()。
$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");
回答by michele
try with $("#<id of fieldset controlgroup>").trigger("create");
尝试 $("#<id of fieldset controlgroup>").trigger("create");
回答by joerg
try
尝试
$('input:checkbox').checkboxradio('refresh');
回答by Valeriy Kliuk
<!DOCTYPE HTML>
<html>
<head>
<title>checkbox</title>
<link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
var myArray = [];
$(document).ready(function() {
// put all your jQuery goodness in here.
myArray[myArray.length] = 'Item - 0';
checkboxRefresh();
});
function checkboxRefresh(){
var newhtml = "<fieldset data-role=\"controlgroup\">";
newhtml +="<legend>Select items:</legend>" ;
for(var i = 0 ; i < myArray.length; i++){
newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
}
newhtml +="</fieldset>";
$("#checkboxItems").html(newhtml).page();
//$('input').checkboxradio('disable');
//$('input').checkboxradio('enable');
//$('input').checkboxradio('refresh');
//$('input:checkbox').checkboxradio('refresh');
$("input[type='checkbox']").checkboxradio("refresh");
$('#my-home').page();
}
$('#bAdd').live('click', function () {
myArray[myArray.length] = 'Item - ' + myArray.length;
checkboxRefresh();
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="my-home">
<div id="my-homeheader">
<h1 id="my-logo">checkbox</h1>
</div>
<div data-role="content">
<div id="checkboxItems" data-role="fieldcontain"></div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
<a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
</div>
</fieldset>
</div>
</div>
</body>
</html>
It works just ones for me. Any idea why?
它只对我有用。知道为什么吗？
The Answer for me is:
我的答案是：
$("input[type='checkbox']").checkboxradio();
回答by Tono Nam
What work out for me was to remove the whole fieldset then replace place a new fieldset with the new item I wanted to add then I called the .trigger('pagecreate');method on the whole page. This is not the most efficient solution but that is the only one that worked in my case.
对我来说有效的是删除整个字段集，然后用我想要添加的新项目替换新的字段集，然后我.trigger('pagecreate');在整个页面上调用该方法。这不是最有效的解决方案，但这是唯一对我有效的解决方案。
