Jquery Mobile Back Buttons

Question

I have an application in which I am programmatically add a back button to the page. This means that the first page will not have a back button on it. However the app itself has

Answer 1

I assume that you're using data-add-back-btn=true to dynamically add data-rel=back buttons to your pages. Hence, it is possible by first, checking if there is no data-rel=back in the active page and secondly, it is not your Home page.

One more thing, you need to remove that button once you navigate away from that page in order not to overlap with the one that JQM will generate.

Demo

var backbtn = '<a href="#home" data-icon="arrow-l" data-iconpos="notext" class="backbtn"></a>';

$(document).on('pagebeforeshow', function () {
 var activePage = $.mobile.activePage;
 if (activePage.find('[data-rel=back]').length === 0 && activePage[0].id != 'home') {
  activePage.find('[data-role=header] h1').before(backbtn);
 }
 $('[data-role=page]').trigger('pagecreate');
 $(document).on('pagebeforehide', function () {
  $('a.backbtn').remove();
 });
});