jquery mobile Dynamically Injecting Pages

Question

I\'m using jQuery mobile and currently build a menu on the fly using the code below. I now need to create actual pages for menu items as my next step. I have been looking at

Answer 1

Here is a simple way of creating new pages dynamically.

Working example

// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");

// Append the new page into pageContainer
newPage.appendTo($.mobile.pageContainer);

// Move to this page by ID '#page'
$.mobile.changePage('#page');

Answer 2

There is a cashing problem if you want to recreate the page with new content. So you must do this...

var $i = 0;
$('#test').on('click', function () {
	$i++;
  alert("I="+$i);
    // Prepare your page structure
    var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here = " + $i + "</div></div>");

    // Append the new page into pageContainer
    newPage.appendTo($.mobile.pageContainer);

    // Move to this page by ID '#page'
    $.mobile.changePage('#page');
});

$(document).on('pagehide', '#page', function(){
    $(this).remove();
});

<a data-role=button id=test>test</a>