动态控制组和复选框无样式

IT技术 javascript dynamic jquery-mobile checkbox
2021-03-10 21:01:47

所以我试图将动态内容直接加载到我的复选框容器 (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");

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

6个回答

动态地将复选框或单选按钮附加到控制组时，您需要处理两个 jQuery Mobile 小部件.checkboxradio()和.controlgroup().

一旦添加了新元素，都应该使用 jQuery Mobile CSS 创建/更新/增强/样式化。

最新稳定版和RC版的实现方式不同，但方法相同。

jQuery Mobile 1.2.x - 1.3.x（稳定版）

追加后的复选框/单选按钮，以静态或动态controlgroup，.checkboxradio()应首先调用增强复选框/单选按钮标记，然后.controlgroup("refresh")重新风格controlgroup股利。

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

演示

jQuery 移动 1.4.x

这里唯一的区别是元素应该附加到 .controlgroup("container")

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

然后同时提高controlgroup以及其中的所有元素，使用.enhanceWithin()。

$("[data-role=controlgroup]").enhanceWithin().controlgroup("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");

如果这适用于他们的代码，您就会知道您的标记有误。如果不是，则该刷新功能存在错误。（我知道这不是最终解决方案，但有时您必须进行一些调试：）

编辑：
发现类似问题，通过使用Page()
JQM FAQ SO Question解决

有人可以使用 page() 方法发布一个工作示例吗？我仍然遇到同样的问题。
2021-04-20 21:01:47
好的，试过那个例子……那 4 个复选框加载得很好（具有适当的样式）。它是动态加载的那些没有样式的。（修改了追加查询，现在只放入一个输入和一个标签）。运行刷新语句什么也不做。
2021-04-23 21:01:47
太好了……做到了。感谢所有的帮助伙伴:)
2021-04-24 21:01:47
好的，然后我发现 pplPage()用于解决这些问题。我将在我的答案中添加几个链接。
2021-05-12 21:01:47
奥马尔的答案应该被设置为接受的答案，$("[type=checkbox]").checkboxradio();它的朋友就像一个魅力 - 只是不给 checkboxradio() 函数提供参数。
2021-05-15 21:01:47

尝试 $("#<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();
其它你可能感兴趣的问题
上一篇在 ajax/jquery 调用的成功函数之外使用变量 下一篇Angular UI-Router $urlRouterProvider .when 不工作*不再*