Question

JQuery Mobile下拉列表没有格式化为移动外观？我正在通过AJAX加载动态数据，下拉列表保留其原生外观，但是如果我通过AJAX加载静态内容，则格式化显示在MOBILE外观中。

HTML：

<div data-role="page" data-theme="b" id="roster" data-add-back-btn="true">
    <div data-role="header" class="tb">
        <h1>Roster</h1>
        <a class="ui-btn-right" id="infoButton" onclick="openPickDate();">+</a>
    </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('<form><div data-role="fieldcontain" id="stations"></div></form>');      
$('#callback #stations').append('<select name="select-native-1" id="lol" onchange="ShowStations();">'+ KeyArray + '</select>');

JSFiddle example

Answer 1

您的问题与此处描述的问题相同：jQuery Mobile does not apply styles after dynamically adding content

您有几种方法可以解决此问题，但最简单的方法是添加

.trigger('create');

到修改后的元素。

您的jQuery代码将变为：

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

请参阅更新后的JSFiddle：http://jsfiddle.net/yqZGW/8/

动态下拉移动格式

1 个答案: