Динамическая контрольная группа и флажки без стиля - PullRequest
Новая
       22

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

16 голосов
/ 14 апреля 2011

Поэтому я пытаюсь загрузить динамическое содержимое прямо в мой контейнер флажков (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 ]

12 голосов
/ 20 декабря 2013

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

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

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

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

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

$("[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");

Демо

7 голосов
/ 28 ноября 2012

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

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

7 голосов
/ 14 апреля 2011

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

<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");

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

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

3 голосов
/ 07 мая 2011

попробуй 

$('input:checkbox').checkboxradio('refresh');
1 голос
/ 17 июня 2011 
        <!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();
0 голосов
/ 29 января 2013

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

...