Fatal编程技术网
  • javascript/
  • Javascript 未设置样式的动态控制组和复选框

Javascript 未设置样式的动态控制组和复选框

javascript dynamic jquery-mobile checkbox

Javascript 未设置样式的动态控制组和复选框,javascript,dynamic,jquery-mobile,checkbox,Javascript,Dynamic,Jquery Mobile,Checkbox,因此，我试图将动态内容直接加载到我的复选框容器（group_复选框）中 但这不起作用。。。知道我做错了什么吗？先试试他们自己的静态演示代码： <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many snacks as you'd like:</legend&g

因此，我试图将动态内容直接加载到我的复选框容器（group_复选框）中

但这不起作用。。。知道我做错了什么吗？

先试试他们自己的静态演示代码：

<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>
如果这对他们的代码有效，您将知道标记中有错误。如果不是，则该刷新功能存在错误。（我知道这不是最终解决方案，但有时您必须进行一些调试：）

编辑：
发现类似问题，请使用
Page（）


试试看

$('input:checkbox').checkboxradio('refresh');
尝试使用
$（“#”）触发器（“创建”）


对我来说，解决方法是删除整个字段集，然后用我想添加的新项替换一个新字段集，然后调用
.trigger（'pagecreate'）方法。这不是最有效的解决方案，但在我的情况下，这是唯一有效的解决方案。
在将复选框或单选按钮动态添加到控制组时，您需要处理两个jQuery移动小部件，
.checkboxradio（）
和
.controlgroup（）

添加新元素后，应使用jQuery Mobile CSS创建/更新/增强/设置样式

在最新的稳定版本和RC版本中实现这一点的方法有所不同，但方法是相同的

jquerymobile1.2.x-1.3.x（稳定版本）
将复选框/单选按钮附加到静态或动态控制组后，应首先调用
.checkboxradio（）
以增强复选框/单选按钮标记，然后调用
.controlgroup（“刷新”）
以重新设置控制组div的样式





jquerymobile1.4.x
这里唯一的区别是元素应该附加到
.controlgroup（“容器”）

然后使用
.enhanceWithin（）
增强controlgroup和其中的所有元素




您正在生成未选中的复选框。然后尝试刷新复选框。首先尝试删除.attr（“checked”，true）部分。也不要忘记，名称和ID应该是唯一的。是的，我尝试删除语句的attr（）部分，但也没有成功。还从输入中删除了名称和id，以查看这是否有帮助-它没有：（嗯…顺便说一句：在一个父字段集中生成许多字段集是否正确？我以前没有这样做。只需遵循文档（它们只有很少的部分）。我尝试用div替换内部字段集来对内容进行分组，没有任何区别。只是更新了原始帖子以避免任何混淆…奇怪，似乎是一个非常常见的任务OK，尝试了那个例子…这4个复选框加载良好（具有适当的样式）。动态加载的复选框没有样式。（修改了append查询，现在只输入一个输入和一个标签）。运行refresh语句没有任何作用。好的，然后我使用
Page（）
找到了解决这些问题的ppl。我将在我的答案中添加几个链接。太好了……这样做了。感谢所有的帮助，伙计：）有人可以使用Page（）发布一个工作示例吗方法？我仍然对同一个问题有疑问。Omar的答案应该设置为可接受的答案，
$（“[type=checkbox]”）。checkboxradio（）；
和它的朋友们工作得很好-只需不给checkboxradio（）函数任何参数。

$("input[type='checkbox']").checkboxradio("refresh");



<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>



$("input[type='checkbox']").checkboxradio("refresh");



$('input:checkbox').checkboxradio('refresh');



        <!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>



$("input[type='checkbox']").checkboxradio();



$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");



$("#foo").controlgroup("container").append(elements);



$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");