Как мне сказать jquery mobile добавить классы в динамически добавляемые поля формы в виде списка? - PullRequest
Новая
       0

Как мне сказать jquery mobile добавить классы в динамически добавляемые поля формы в виде списка?

0 голосов
/ 12 января 2012

Я изо всех сил пытаюсь заставить JQM повторно инициализировать страницу jquery с представлением списка, содержащим поля формы.

Один из элементов формы инициализируется как часть обычного процесса инициализации JQM, который отображается корректно со всем правильным классом, примененным ко всем элементам.

Все остальные добавляются динамически, используя JQ's append

Когда элементы добавляются динамически, я не могу найти правильный метод для повторной инициализации списка, чтобы применить стиль ко всему, поле содержит тег div и текстовую область.

Я подготовил пример, демонстрирующий различные методы повторной инициализации элементов, которые я пробовал, на основе других вопросов, найденных в SO и в Интернете.

http://jsfiddle.net/robaldred/UPsQr/

В моем примере строка 5 правильно инициализирована, однако для этого требуется вызвать метод fieldcontain() для метода textinput() и вручную добавить класс ui-input-label к метке. Это похоже на то, что я много чего теряю, наверное, я что-то упускаю.

Ответы [ 2 ]

1 голос
/ 12 января 2012

Рабочий пример:

JS 

$('#add_element').click(function() {
    var list   = $('ul[data-role="listview"]');
    var nextLi = ((list.children().length) + 1);

    li = '<li><div data-role="fieldcontain"><label for="textarea'+nextLi+'">Input:</label><textarea id="textarea'+nextLi+'" name="textarea'+nextLi+'"></textarea></div></li>';
    list.append(li);
    list.listview('refresh');

    $('#page').trigger('create');
});

//$('#add_element').hide();

HTML 

<html>
    <head>
    </head>
    <body>
        <div id="page" data-role="page">
            <!-- First field is done by jQM's normal initialization -->
            <!-- The Rest are added onload and appended to the listview -->
            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                        <label for="textarea1">Input:</label>
                        <textarea id="textarea1" name="textarea1"></textarea>
                    </div>
                </li>
            </ul>
            <a data-role="button" id="add_element">Add Fields</a>
        </div>
    </body>
</html>

ПРИМЕЧАНИЕ:

jQM Поддерживает jQuery 1.6.4

1 голос
/ 12 января 2012

Инициируйте событие создания на странице следующим образом: 

$("#page").trigger("create");

Создать и обновить: важное различие

Обратите внимание, что естьважное различие между событием create и методом обновления, которое есть у некоторых виджетов.Событие create подходит для улучшения необработанной разметки, содержащей один или несколько виджетов.Метод обновления должен использоваться в существующих (уже улучшенных) виджетах, которыми манипулировали программно и которые должны обновляться для соответствия пользовательского интерфейса.

Например, если у вас была страница, на которой вы динамически добавляли новый неупорядоченный список сАтрибут data-role = listview после создания страницы, инициирующий создание родительского элемента этого списка, превратил бы его в виджет в стиле listview.Если после этого программным способом будет добавлено больше элементов списка, то при вызове метода обновления представления списка будут обновлены только эти новые элементы списка до расширенного состояния, а существующие элементы списка останутся нетронутыми.

Обновил свою скрипку - http://jsfiddle.net/UPsQr/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...