0

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>

查询：

$('#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 示例

4

1 回答 1

1

Your problem is the same as the one described here: jQuery Mobile does not apply styles after dynamically adding content

You have several possibilities to fix this problem, but the easiest one would be to add

.trigger('create');

to the modified element.

Your jQuery code will become:

$('#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');

See the updated JSFiddle: http://jsfiddle.net/yqZGW/8/

于 2013-11-05T20:55:48.293 回答