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

| 因此,我试图将动态内容直接加载到我的复选框容器(group_checkboxes)中
<div id=\'group_checkboxes\' data-role=\"fieldcontain\">

</div>
这是我正在运行的用于填充容器的语句:
$(\'#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>\');
复选框均已填充,但未应用jQuery样式。 根据文档,我需要做的就是调用此函数来更新复选框样式...
$(\"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\");
如果这适用于他们的代码,您将知道标记错误。如果不是,则刷新功能存在错误。 (我知道这不是最终的解决方案,但有时您需要做一些调试:) 编辑: 发现类似的问题,使用using5解决 JQM常见问题 所以问题     
将复选框或单选按钮动态添加到控件组时,您需要处理两个jQuery Mobile小部件
.checkboxradio()
.controlgroup()
。 一旦添加了新元素,都应使用jQuery Mobile CSS创建/更新/增强/样式化。 在最新的稳定版本和RC版本中,实现此目标的方法不同,但是方法相同。 jQuery Mobile 1.2.x-1.3.x(稳定版) 在将复选框/单选按钮附加到静态或动态控制组之后,应先调用ѭ6来增强复选框/单选按钮的标记,然后再调用ѭ9来重新设置控件组div的样式。
$(\"[type=checkbox]\").checkboxradio();
$(\"[data-role=controlgroup]\").controlgroup(\"refresh\");
  演示版 jQuery Mobile 1.4.x 唯一的区别是元素应附加到ѭ11
$(\"#foo\").controlgroup(\"container\").append(elements);
然后使用
.enhanceWithin()
增强对照组及其中的所有元素。
$(\"[data-role=controlgroup]\").enhanceWithin().controlgroup(\"refresh\");
  演示版     
尝试
$(\"#<id of fieldset controlgroup>\").trigger(\"create\");
http://jsfiddle.net/YKvR3/36/     
尝试
$(\'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();
    
对我来说,解决方法是删除整个字段集,然后用要添加的新项目替换新的字段集,然后在整个页面上调用
.trigger(\'pagecreate\');
方法。这不是最有效的解决方案,但是在我的案例中这是唯一有效的解决方案。     

要回复问题请先登录注册