jquery - json query on another page

Question

I am writing a simple JSON / HTML / JQuery Mobile App.

My main page (index.html) has this code:

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

and it populates in:

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

This works correctly.

But if I navigate to calendar.html

And run the same exact code, the listview doesn't populate. I've tried changing the pageinit to pagebefore show. I've changed the #index to #calendar, I've changed the listview id, etc..

Am I doing this right or should I be using different code on subsequent pages? The "live" page view in DW shows the query. But when I package in phonegap, I get a UL header, but not data elements.

Any ideas?