blocks|key|715257|text|首先尝试他们自己的静态演示代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715258|<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>|code-block|syntax|javascript|715259|正如我在评论中提到的，他们只使用了一个字段集。|715260|如果此方法有效，则调整脚本以动态生成相同的标记，然后刷新它们|715261|$("input[type='checkbox']").checkboxradio("refresh");|715262|如果这可以与他们的代码一起工作，您就会知道您在标记中有错误。如果不是，则刷新函数出现错误。(我知道这不是最终的解决方案，但有时您必须进行一些调试:)|715263|编辑：|715264|发现类似的问题，通过使用Page()解决|offset|length|style|CODE|715265|JQM+FAQ|715266|SO+Question|715267|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerymobiledictionary.dyndns.org/faq.html|1|https://stackoverflow.com/questions/4039428/jquery-mobile-dynamically-creating-form-elements^0|0|0|0|0|0|0|0|C|6|0|0|7|0|0|0|B|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1D|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@$S|1I|T|1J|U|V]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$S|1L|T|1M|1|1N]]|A|$]]|$1|Y|3|Z|5|6|7|1O|8|@]|9|@$S|1P|T|1Q|1|1R]]|A|$]]|$1|10|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

<p>First try their own static demo code:</p>

<pre><code>&lt;div  data-role="fieldcontain"&gt;
                &lt;fieldset data-role="controlgroup"&gt;
                    &lt;legend&gt;Choose as many snacks as you'd like:&lt;/legend&gt;
                    &lt;input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /&gt;
                    &lt;label for="checkbox-1a"&gt;Cheetos&lt;/label&gt;

                    &lt;input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /&gt;
                    &lt;label for="checkbox-2a"&gt;Doritos&lt;/label&gt;

                    &lt;input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /&gt;
                    &lt;label for="checkbox-3a"&gt;Fritos&lt;/label&gt;

                    &lt;input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /&gt;
                    &lt;label for="checkbox-4a"&gt;Sun Chips&lt;/label&gt;
                &lt;/fieldset&gt;
            &lt;/div&gt;
</code></pre>

<p>They are using just one fieldset as I mentioned in comments.<br>
If this works, then adjust your script to generate the same markup dynamically and then refresh them</p>

<pre><code>$("input[type='checkbox']").checkboxradio("refresh");
</code></pre>

<p>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 :)</p>

<p>Edit:<br>
Found similar problems, solved by using <code>Page()</code><br>
<a href="http://jquerymobiledictionary.dyndns.org/faq.html" rel="nofollow noreferrer">JQM FAQ</a><br>
<a href="https://stackoverflow.com/questions/4039428/jquery-mobile-dynamically-creating-form-elements">SO Question</a></p>


blocks|key|931295|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|931296|$('input:checkbox').checkboxradio('refresh');|code-block|syntax|javascript|931297|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try </p>

<pre><code>$('input:checkbox').checkboxradio('refresh');
</code></pre>


blocks|key|715310|text|++++++++<!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+%2B="<legend>Select+items:</legend>"+;
++++++++++++++++for(var+i+=+0+;+i+<+myArray.length;+i%2B%2B){
++++++++++++++++++++newhtml+%2B=+"<input+type=\"checkbox\"+name=\"checkbox-"%2Bi%2B"a\"+id=\"checkbox-"%2Bi%2B"a\"+class=\"custom\"+/>"+;
++++++++++++++++++++newhtml+%2B=+"<label+for=\"checkbox-"%2Bi%2B"a\">"%2BmyArray[i]%2B"</label>";
++++++++++++++++}
++++++++++++++++newhtml+%2B="</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+-+'+%2B+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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|715311|它只对我有效。知道为什么吗？|unstyled|715312|我的答案是：|715313|$("input[type='checkbox']").checkboxradio();|715314|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>        &lt;!DOCTYPE HTML&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;checkbox&lt;/title&gt;
        &lt;link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" /&gt;
        &lt;script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
             var myArray = [];
             $(document).ready(function() {
                // put all your jQuery goodness in here.
                myArray[myArray.length] = 'Item - 0';
                checkboxRefresh();
             });

             function checkboxRefresh(){
                var newhtml = "&lt;fieldset data-role=\"controlgroup\"&gt;";
                newhtml +="&lt;legend&gt;Select items:&lt;/legend&gt;" ;
                for(var i = 0 ; i &lt; myArray.length; i++){
                    newhtml += "&lt;input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" /&gt;" ;
                    newhtml += "&lt;label for=\"checkbox-"+i+"a\"&gt;"+myArray[i]+"&lt;/label&gt;";
                }
                newhtml +="&lt;/fieldset&gt;";
                $("#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();
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div data-role="page" data-theme="b" id="my-home"&gt;
        &lt;div id="my-homeheader"&gt;
            &lt;h1 id="my-logo"&gt;checkbox&lt;/h1&gt;
        &lt;/div&gt;

        &lt;div data-role="content"&gt;

            &lt;div id="checkboxItems" data-role="fieldcontain"&gt;&lt;/div&gt;

            &lt;fieldset class="ui-grid-b"&gt;
                &lt;div data-role="controlgroup" data-type="horizontal"&gt;
                    &lt;a id="bAdd" href="#" data-role="button" data-icon="plus" &gt;Add new item&lt;/a&gt;
                &lt;/div&gt;
            &lt;/fieldset&gt;

        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>It works just ones for me. Any idea why? </p>

<p>The Answer for me is:</p>

<pre><code>$("input[type='checkbox']").checkboxradio();
</code></pre>


blocks|key|931355|text|尝试使用$("#<id+of+fieldset+controlgroup>").trigger("create");|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|931356|http://jsfiddle.net/YKvR3/36/|931357|entityMap|0|LINK|mutability|MUTABLE|url^0|4|1I|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>try with  <code>$("#&lt;id of fieldset controlgroup&gt;").trigger("create");</code></p>

<p><a href="http://jsfiddle.net/YKvR3/36/" rel="noreferrer">http://jsfiddle.net/YKvR3/36/</a></p>


blocks|key|715395|text|我的工作是删除整个字段集，然后替换，用我想要添加的新项放置一个新的字段集，然后在整个页面上调用.trigger('pagecreate');方法。这不是最有效的解决方案，但在我的情况下，这是唯一有效的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|715396|entityMap^0|1B|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>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 <code>.trigger('pagecreate');</code> method on the whole page. This is not the most efficient solution but that is the only one that worked in my case.</p>


<p>So I'm trying to load dynamic content straight into my checkbox container (group_checkboxes)</p>

<pre><code>&lt;div id='group_checkboxes' data-role="fieldcontain"&gt;

&lt;/div&gt;
</code></pre>

<p>This is the statement I'm running to populate the container:</p>

<pre><code>$('#group_checkboxes').append('&lt;fieldset data-role="controlgroup"&gt;&lt;input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /&gt;&lt;label for="' + $(this).find('data').text() + '"&gt;' + $(this).find('label').text() + '&lt;/label&gt;&lt;/fieldset&gt;');
</code></pre>

<p>The checkboxes are all populated but the jQuery style is not applied.</p>

<p>According to the <a href="http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-checkboxes.html" rel="nofollow noreferrer">docs</a> all I need to do is call this function to update the checkbox style...</p>

<pre><code>$("input[type='checkbox']").checkboxradio("refresh");
</code></pre>

<p>That doesn't work though... Any idea what I'm doing wrong?</p>


Dynamic controlgroup and checkboxes unstyled

容器

jQuery

所以我尝试将动态内容直接加载到我的复选框容器(group_checkboxes)中<div id='group_checkboxes' data-role="fieldcontain"></div>下面是我用来填充容器的语句：$('#group_checkboxes').append('<fieldset data-r...

问动态控件组和复选框未设置样式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态控件组和复选框未设置样式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态控件组和复选框未设置样式
EN