Ajax добавил HTML не наследует стили страницы - jQueryMobile

Question

Итак, я довольно новичок в jQueryMobile, но мне удалось создать панель поиска, которая отображает результаты при вводе с использованием Ajax, который работает отлично, но проблема в том, что что CSS-стили не применяются к содержимому ajax'd.

Есть ли способ заставить CSS обновить или обновить или просто применить CSS к новому ajax'd html?

Answer 1

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

Однако, если вы создаете новую разметку на сторону клиента или нагрузку содержания через Ajax и внедрить его в страницу, вы можете вызвать создать событие для обработки автоматической инициализации для всех плагин, содержащихся в нового разметки. Это может быть запущено на любом элементе (даже на самой странице ), сохраняя задачу вручную инициализировать каждый плагин (кнопка просмотра, выбор и т. Д.).

Например, если блок HTML-разметка (скажем, форма Логина) был загружен через Ajax, триггер создать событие для автоматического преобразования всех виджетов, которые он содержит (входы и кнопки в данном случае) в расширенные версии. Код для этого сценария будет:

$(...new markup that contains widgets...).appendTo(".ui-page").trigger("create"); 

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

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

jQM Docs здесь:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

освежающие элементы формы
В JQuery Mobile, некоторые улучшенные элементы управления формы просто стиле (входы), но другие пользовательские Элементы управления (выбирает, ползунки) построены и сохранены в синхронизации с, native cont рол.Чтобы программно обновить элемент управления формой с помощью JavaScript, сначала обработайте собственный элемент управления, затем используйте метод обновления , чтобы сообщить расширенному элементу управления обновить себя, чтобы он соответствовал новому состоянию . Вот некоторые примеры того, как обновить общие элементы формы, затем вызвать метод обновления:

Флажки:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh"); 

Радиоприемники:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh"); 

Выбор:

var myselect = $("#selectfoo"); 
myselect[0].selectedIndex = 3; 
myselect.selectmenu("refresh"); 

Слайдеры:

$("input[type='range']").val(60).slider("refresh"); 

Флип переключатели (они используют ползунок):

var myswitch = $("#selectbar"); 
myswitch[0].selectedIndex = 1; 
myswitch.slider("refresh"); 

jQM Docs здесь:

• http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html