Question

I have a single page jQuery Mobile app with four “data-role=’pages'” in place; so, essentially, it’s one HTML doc with four “pages.”

Each “page” also has a navigation footer that I am populating dynamically through javascript. I defined a variable called “theFooter,” and assigned all my empty footer divs (with classes of “footer”) like so:

$('.footer').html(theFooter);

Now, in order to get this to work properly, I have to populate those footers PRIOR to the page being created, otherwise jQuery Mobile won’t apply it framework to make the footer bar look like a mobile app nav bar.
So I achieve that through this:

$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that     the 'page' has been run
    $('.footer').html(theFooter);
});

It works like a dream, the first time around. Let’s suppose the pages are “about,” “contact,” “mission,” and “calendar”…

You click “about”… perfect.

You click “contact”.. perfect.

You can do this for each of the “pages,” and each time the “pagebeforecreate” is fired and the footer looks GREAT.

HOWEVER, if now you click on, say, “about” again (or any of the ones that you’ve already visited), the page transitions and the content is in place, but there is NO JQUERY MOBILE FORMATTING. And it is not firing the ‘pagebeforecreate’ function again, which makes sense, because it has already been created the first time.

I’ve tried working with ‘pageinit’ and ‘pagebeforeshow’ firings, but have gotten nowhere.

I have tried .trigger() and .page() methods… and got nowhere.

Can someone explain exactly how to make that JQuery Mobile formatting stick?

Answer 1

If you call .trigger('create') on the parent element of the widget you can enhance it’s markup at any point in time:

$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that     the 'page' has been run
    $('.footer').html(theFooter).trigger('create');
});