jquery - 別のページの json クエリ

Question

単純な JSON/HTML/JQuery モバイル アプリを作成しています。

私のメイン ページ (index.html) には次のコードがあります。

<script type="text/javascript">
        $(document).on('pageinit', '#index', function(){ 
            var url="http://localhost/json/jsondata.aspx?Option=GetTodaysEvents";
            $.getJSON(url,function(json){
                //loop through events
                $.each(json.Events,function(i,dat){
                    $("#todaycal").append("<li>"+dat.Date+"  "+dat.Title+"</li>");
                 });
                 $("#todaycal").listview('refresh');
            });
         });
    </script>

次の場所に入力されます。

<ul id="todaycal" data-role="listview" data-inset="true"><li data-role="list-divider">Today's Events</li></ul>

これは正しく動作します。

しかし、calendar.html に移動すると

同じ正確なコードを実行すると、リストビューは読み込まれません。pageinit を pagebefore show に変更してみました。#index を #calendar に変更し、リストビュー ID などを変更しました。

私はこれを正しく行っていますか、それとも後続のページで別のコードを使用する必要がありますか? DW の「ライブ」ページ ビューにクエリが表示されます。しかし、phonegap でパッケージ化すると、UL ヘッダーは取得されますが、データ要素は取得されません。

何か案は？