jquery-mobile - 更新するまで動的リストビューがロードされない

Question

JS render を使用して、Jquery Mobile で Phonegap アプリ用の動的ページを作成しています。ただし、問題は、ページが更新されるまでリストビューが読み込まれないことです。明らかにそれは私が望んでいるものではなく、別のアプリでまったく同じ手法を使用し、リストビューがすぐに読み込まれます。両者に違いはないので、なぜこれが機能しないのかわかりません。

ページをロードするためのスクリプトは次のとおりです。

<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>

これは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>