Jquery mobile 刷新前不加载动态listview

我正在使用JS render在Jquery Mobile中为我的Phonegap应用程序创建动态页面。然而，问题是直到页面刷新后才加载listview。显然，这不是我想要的，在另一个应用程序中，我使用了完全相同的技术，listview立即加载。问题是这两者之间没有区别，所以我不知道为什么它在这一个中不起作用

以下是我加载页面的脚本：

<script src="jquery/jsrender.min.js"></script>
<script type="text/javascript">
$(document).on('pageinit', '#kunstwerken_exp1', function (event, ui) {
    var $page = $(event.target); 
    $.ajax({
        dataType:"json",
        url:"json/exp1_index.js",
        success:function(data, textStatus, jqHXR){
            for( var x = 0; x < data.length; x++){
                //create valid unique IDs for each page.
                data[x].id = data[x].link.replace("?","").replace("=","").replace("#","");
            }
            console.log("success:");
            console.log(data);
            $("#templateDropPoint").html($("#template").render(data));
            $("#templateDropPoint").listview("refresh");
            $("body").append($("#pagetemplate").render(data));

        },
        error:function(jqXHR, textStatus, errorThrown ){
            console.log(textStatus+ " "+ errorThrown);
        }
    });

});
</script>

$（文档）.on（'pageinit'，'kunstwerken_exp1'，函数（事件，用户界面）{
var$page=$（event.target）；
$.ajax({
数据类型：“json”，
url:“json/exp1_index.js”，
成功：函数（数据、文本状态、jqHXR）{
对于（var x=0；x

这是HTML：

<div data-role="page" id="kunstwerken_exp1" data-url="kunstwerken_exp1">
<div data-role="content">   
    <ul data-role="listview" id="templateDropPoint"></ul>
</div><!-- /content -->
</div>

<script id="template" type="text/x-jsrender">
<li>
<a href="#{{>id}}">
  <img src={{>img}} />
  <h5><b>{{>naam}}</b></h5>
  <h6>{{>kunstwerk}}</h6>
</a>
</li>
</script>

<script type="text/x-jsrender" id="pagetemplate">
<div data-role="page" id="{{>id}}">
    {{if pagina}}
    <div data-role="content">
        <h1>{{>naam}} ({{:pagina.nationaliteit}})</h1>
        <h2>{{:pagina.kunstwerk}}</h2>
        <em>{{:pagina.onderschrift}}</em>

        <div class="ui-grid-a my-breakpoint">
            <div class="ui-block-a">
            <div class="koloma">
                <div class="callbacks_container">
                <ul class="rslides">
                    <li id="callbacks1_s0">
                    <img src="{{:pagina.afbeelding1}}" alt=""><p class="caption">{{:pagina.onderschrift1}}</p>
                    </li>
                </ul>
                </div>
                {{if pagina.videooff}}
                <ul class="tabs">
                    <li><a href="#" onclick="clickKunstenaar0();"><img src="images/video.png"/></a></li><br>
                </ul>
                {{/if}}
            </div>
            </div>

        <div class="ui-block-b">
        <div class="kolomb">{{:pagina.tekst}}</div>
        </div>
        </div>  

    </div>
    {{/if}}
</div>
</script>

{{if pagina}}
{{>naam}}（{{:pagina.nationateit}}）
{{:pagina.kunstwerk}
{{:pagina.onderschrift}


{{:pagina.onderschrift1}


{{if pagina.videooff}




{{/if}
{{:pagina.tekst}
{{/if}

要了解这种情况，您需要了解jQuery Mobile的工作原理。它使用AJAX加载其他页面

第一页正常加载。它的

头部

和

主体

被加载到

DOM

，它们在那里等待其他内容。加载第二个页面时，只有其

正文

内容加载到

DOM

。更准确地说，即使是

车身

也没有满载。只会加载属性为data role=“page”的第一个div，其他所有内容都将被丢弃。即使在

正文中有更多的页面，也只会加载第一个页面。此规则仅适用于后续页面，如果初始HTML中有更多页面，则将加载所有页面

这就是为什么只有在页面刷新后才能成功显示listview

以下是官方文件：

不幸的是，您不会在他们的文档中找到这些描述。他们是否认为这是一个常识，或者他们忘记像我的其他主题一样描述这一点。（jQuery移动文档很大，但缺少很多东西）

我有另一个讨论这个问题。可以在那里找到解决方案和工作示例。
我有两个问题：1）您是从另一个页面进入本页面的吗？2） 这是一个多页模板吗？非常感谢您的回答。我终于让它工作了！