JQuery mobile persistent navbar (outside page div)

Question

I've got a navbar outside the page div in a footer (it is on every page) I tried to do a simple fix for the persistent active state of the navbar It worked for the tabs on one of the pages but does not seem to work for this.

Actually, everything works except for some reason ui-btn-active does not get added

Here is the code

$(document).one( "pageinit", function() {
  $('div[data-role="footer"] [data-role="navbar"] a').click(function(e) {
    $(this).html("abc");
    $('div[data-role="footer"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
    $(this).addClass('ui-btn-active ui-state-persist');
});

});

The html of the anchor changes, ui-state-persist gets added on the last line but ui-btn-active just does not get added for some reason...

Answer 1

Ok it seems jquery mobile automatically removes ui-btn-active on page transition, even if your navbar is out of page div (which I find kind of lame...) It seems it does this on or after pagebeforeshow, because this did not work with that event... so I just used pageshow instead.

Here is the working code:

var navbar;
$(document).on("pageshow", function() {
    if(navbar) {
        $(navbar).addClass('ui-btn-active')
    }
});
$(document).one( "pageinit", function() {
    $('div[data-role="footer"] [data-role="navbar"] a').click(function() {
        navbar = $(this);
    });
});