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");