jQuery Mobile: Use same header footer for all pages

Question

I\'m trying to implement some code that will create the headers and footers on all of my web pages instead of hard coding them. I tried this:

I had this in my \"main pag

Answer 1

I use .clone()

In my multipage jQuery Mobile project I have a header on my main page:

   Menu
   
My Header

and in all the subsequent pages (or divs with data-role=page) I have this:

and then on pageinit you clone the master and append to all the children:

$(document).delegate("#index", "pageinit", function () {
       $("#headerMaster").clone().appendTo(".headerChild");
});

EDIT: if pageinit doesn't work for you, try the pagebeforecreate event

$(document).delegate("#index", "pagebeforecreate", function () {
     $("#headerMaster").clone().appendTo(".headerChild");  
});