Динамическое развертывание мобильных приложений

Выпадающий список JQuery Mobile не форматируется как мобильный вид? Я загружаю динамические данные через AJAX, а раскрывающийся список сохраняет свой внешний вид, однако, если я загружаю статический контент через AJAX, форматирование отображается в режиме MOBILE.

HTML:

<div data-role="page" data-theme="b" id="roster" data-add-back-btn="true">
 <div data-role="header">
 <h2>Roster</h2>
 +
 </div><!-- /header -->

 <div data-role="content" data-theme="b" id="callback"> 
 <!-- CONTENT LOADED VIA AJAX --> 
 </div>

 <div data-role="footer">
 <h4>Page Footer</h4>
 </div><!-- /footer -->
</div>

Jquery:

$('#callback').append(''); 
$('#callback #stations').append('<select name="select-native-1" id="lol" onchange="ShowStations();">'+ KeyArray + '</select>');

Пример JSFiddle

1 ответ

Ваша проблема такая же, как описанная здесь: jQuery Mobile не применяет стили после динамического добавления контента

У вас есть несколько возможностей решить эту проблему, но самым простым было бы добавить

.trigger('create');

к модифицированному элементу.

Ваш код jQuery станет следующим:

$('#callback').append(''); 
$('#callback #stations').append('<select name="select-native-1" id="lol" onchange="ShowStations();">'+ KeyArray + '</select>');
$('#callback').trigger('create');

См. Обновленный JSFiddle: http://jsfiddle.net/yqZGW/8/

licensed under cc by-sa 3.0 with attribution.