Динамическая контрольная группа и флажки не заполнены

Итак, я пытаюсь загрузить динамический контент прямо в мой контейнер checkbox (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 не применяется.

В соответствии с docs все, что мне нужно сделать, это вызвать эту функцию, чтобы обновить стиль флажка...

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

Это не работает, хотя... Любая идея, что я делаю неправильно?

Ответ 1

Сначала попробуйте свой собственный статический демонстрационный код:

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

Они используют только один набор полей, как я упомянул в комментариях.
Если это сработает, затем настройте script для динамического создания той же разметки, а затем обновите их

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

Если это будет работать с их кодом, вы узнаете, что у вас есть ошибка в разметке. Если нет, есть ошибка с этой функцией обновления. (Я знаю, что это не окончательное решение, но иногда нужно немного отлаживать:)

Edit:
Найденные аналогичные проблемы, решаемые с помощью Page()
Вопросы JQM
SO Вопрос

Ответ 2

При добавлении флажков или переключателей в контрольную группу динамически, вы имеете дело с двумя виджетами jQuery Mobile, .checkboxradio() и .controlgroup().

Оба должны быть созданы/обновлены/улучшены/созданы с помощью jQuery Mobile CSS после добавления новых элементов.

Способ достижения этого отличается от последних стабильных версий и версии RC, но методы одинаковы.

jQuery Mobile 1.2.x - 1.3.x(стабильные версии)

После добавления флажка/переключателя в статическую или динамическую группу управления, сначала следует вызвать .checkboxradio(), чтобы повысить разметку флажка/радиокниги, а затем .controlgroup("refresh"), чтобы переделать div группы управления.

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

Демо

jQuery Mobile 1.4.x

Единственное отличие здесь состоит в том, что элементы должны быть добавлены к .controlgroup("container")

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

а затем усилить как контрольную группу, так и все элементы внутри нее, используя .enhanceWithin().

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

Демо

Ответ 3

попробуйте $("#<id of fieldset controlgroup>").trigger("create");

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

Ответ 4

попробуйте

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

Ответ 5

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

Ответ 6

Для меня было нужно удалить весь набор полей, а затем заменить новый набор полей новым элементом, который я хотел добавить, после чего я назвал метод .trigger('pagecreate'); на всей странице. Это не самое эффективное решение, но это единственный, который работал в моем случае.