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

发布于 2024-11-01 10:37:50 字数 786 浏览 1 评论 0原文

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

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

原文

So I'm trying to load dynamic content straight into my checkbox container (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.

According to the docs all 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哆啦不做梦 2024-11-08 10:37:50

将复选框或单选按钮动态附加到 controlgroup 时，您会处理两个 jQuery Mobile 小部件：.checkboxradio() 和 .controlgroup()。

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

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

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

将复选框 / 单选按钮附加到静态或动态控制组后，.checkboxradio() 来增强 复选框 / 单选按钮 标记，然后调用 .controlgroup("refresh")重新设置 controlgroup div 的样式。

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

演示

jQuery Mobile 1.4.x

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

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

，然后使用 .enhanceWithin() 增强 controlgroup 及其中的所有元素。

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

演示

When appending checkboxes or radio buttons to a controlgroup dynamically, you deal with two jQuery Mobile widgets, .checkboxradio() and .controlgroup().

Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.

The way to achieve this is different in latest stable versions and RC version, but the methods are the same.

jQuery Mobile 1.2.x - 1.3.x (stable versions)

After appending checkbox / radio button to either a static or dynamic controlgroup, .checkboxradio() should be called first to enhance checkbox / radio button markup and then .controlgroup("refresh") to re-style controlgroup div.

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

Demo

jQuery Mobile 1.4.x

The only difference here is elements should be appended to .controlgroup("container")

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

and then enhance both controlgroup and all elements within it, using .enhanceWithin().

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

Demo

回复收藏 0 原文

饮惑 2024-11-08 10:37:50

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

<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 常见问题解答
 SO问题

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

回复收藏 0 原文

枫林﹌晚霞¤ 2024-11-08 10:37:50

尝试使用 $("#").trigger("create");

http://jsfiddle.net/YKvR3/36/

回复收藏 0 原文

娜些时光，永不杰束 2024-11-08 10:37:50

尝试

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

try

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

回复收藏 0 原文

∞琼窗梦回ˉ 2024-11-08 10:37:50

        <!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();

        <!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();

回复收藏 0 原文

空心↖ 2024-11-08 10:37:50

对我来说，解决方法是删除整个字段集，然后用我想要添加的新项目替换放置新的字段集，然后在整个页面上调用 .trigger('pagecreate'); 方法。这不是最有效的解决方案，但这是唯一适用于我的情况的解决方案。

回复收藏 0 原文

~没有更多了~

关于作者

筑梦

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

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

jQuery Mobile 1.4.x

jQuery Mobile 1.2.x - 1.3.x (stable versions)

jQuery Mobile 1.4.x

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

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

jQuery Mobile 1.4.x

jQuery Mobile 1.2.x - 1.3.x (stable versions)

jQuery Mobile 1.4.x

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。