Jquery mobile动态生成ListView调用刷新方法报错

错误：cannot call methods on listview prior to initialization...

示例：

<div data-role="page" id="page">
    <div data-role="header">
        <a href="#" onclick="history.back();" data-ajax="false"
            class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-arrow-l">返回</a>
        <h1>当天的巡查任务</h1>
        <!-- <button class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">保存</button> -->
    </div>

    <div class="ui-corner-all custom-corners">
        <div class="ui-bar ui-bar-b">
            <h3>巡查日志</h3>
        </div>
        <div class="ui-body ui-body-a">
            <button class="ui-btn" onclick="newLog();">新建巡查日志</button>
            <ul data-role="listview" id="xcrzList" data-inset="true"></ul>
        </div>
    </div>

    <div class="ui-corner-all custom-corners">
        <div class="ui-bar ui-bar-b">
            <h3>巡查记录</h3>
        </div>
        <div class="ui-body ui-body-a">
            <button class="ui-btn" onclick="newInfo();">新建现场巡查记录</button>
            <!-- <button class="ui-btn ui-icon-eye ui-btn-icon-left" onclick="shwoAllInMap();">显示所有点到地图</button> -->
            <ul data-role="listview" id="xcxxList" data-inset="true"></ul>

        </div>
    </div>
</div>

报错代码：

$('#xcxxList').listview("refresh");
$('#xcrzList').listview("refresh");

分析原因：

因为page容器是动态生成的。page数据加载至容器时，jquerymobile并没有对该page容器进行初始化。因此调用 page的content下的listview组件的refresh方法时，会出现异常。

 

解决方法：

在dom数据加载完成后，重新生成page

$('#page').page();
$('#xcxxList').listview("refresh");
$('#xcrzList').listview("refresh");