Почему элементы, загруженные с помощью $ .ajax (), не имеют jQuery Mobile CSS?

Question

Я сделал сайт в jQuery Mobile. Я загрузил некоторый контент HTML через функцию jQuery $.ajax().

Загруженный код содержит такие функции, как кнопки и расширяемые секции.

Однако ни один из загруженных элементов не обладает мобильными функциями. JQuery Mobile CSS к ним не применяется.

Это связано с тем, что jQuery Mobile уже использует Ajax для навигации по страницам? Содержимое HTML, которое не было загружено динамически, сохраняет стили jQuery Mobile.

Answer 1

Вам необходимо обновить элементы управления jQM для новых элементов:

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

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

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

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

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

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

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

Answer 2

.trigger( "create" )

работал для меня

Answer 3

$(document).ready(function () {
    $.ajax({
        url : "rest/developers",
        success : function(data) { 
            $('#anomaly-div').html("<a data-role='button' data-theme='b'>test-http</a>").trigger( "create" );
        },
        error : function(error) {
            console.log("error updating table -" + error.status);
        }
    });
});