My aim is to use jquery mobile for styling/enhancement and transitions but use my own ajax navigation methodology so that I can transmit/keep local JSON data rather than using HTML.

I have all my pages in one document. I attach 'tap' events to elements and run ajax to get the JSON and then jQuery to inject html based on the data into listviews etc.

My problem is that I can't seem to get a model that works the second time I load a page. I've tried $('#container').trigger('create'); after adding elements in the success function of my ajax, and also $('#container').listview('refresh'); as an alternative, but I don't think they work because maybe they're designed to work on only the active page.

Anyway I thought I'd ask if there are any resources I should look at that can help me achieve this model.

Example simplified code (works on first run, but upon going back and then forward to this page again... the listview content is not enhanced):

$('#page1-loginbutton').on('tap',function(event) {

      $.ajax({

            //url, data, get etc

            success: function(data) {

                  $.each(data,function(i,v) {

                        $('<li />').attr('id',data[i].id).appendTo('#page2-listcontainer');

                  });

                  $('#page2-listcontainer').trigger('create');

                  $.mobile.changePage('#page2');

            }

      });

});

Many thanks for any pointers