jQuery移动后退按钮未显示在第一页上

Question

i have an app written with:

jquery 1.11.1 jquery mobile 1.4.5 cordova 4.3.0

my index.html looks like

<div data-role="page" id="id1">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 1</h1>
  </div>

  <div data-role="content">
  </div>
</div>

<div data-role="page" id="id2">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 2</h1>
  </div>

  <div data-role="content">
  </div>
</div>

. . .

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page X</h1>
  </div>

  <div data-role="content">
  </div>
</div>

i have onLoad() and onDeviceReady()

when my app starts i get the splash screen and then

<div data-role="page" id="id1">

displays. but it has NO back button despite data-add-back-btn="true"

when

<div data-role="page" id="id2">

displays it DOES have a back button.

i don't understand what's wrong. am i displaying the first page before before jquery mobile is ready enough to display the back button?

Answer 1

You can't have a back button on a first page.

What would be the point, where would it point to?

There's a workaround, create a third page, call it a dummy page. Make it empty and make it first in line. On pagecontainercreate (or pagecreate even if you're using older page events) just programmatically change page to #id1. This way you won't even notice dummy page and your now second page will have a back button.

Working example: http://jsfiddle.net/4y7mav4a/

HTML

    <div data-role="page" id="hidden">

    </div>

    <div data-role="page" id="id1">

      <div data-role="header"  data-add-back-btn="true" style="height: auto">
          <h1>Page 1</h1>
      </div>

      <div data-role="content">
          <a href="#id2">Go to page 2</a>
      </div>
    </div>

    <div data-role="page" id="id2">

      <div data-role="header" data-add-back-btn="true" style="height: auto">
          <h1>Page 2</h1>
      </div>

      <div data-role="content">
      </div>
    </div>

JavaScript

$(document).on('pagecreate', '#hidden', function(){ 
    $(":mobile-pagecontainer").pagecontainer("change", "#id1");        
});

Answer 2

<div data-role="page" id="id1">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 1</h1>
  </div>

I had a similar problem and i solved it by adding this code

<a href="#page1" data-icon="arrow-l">Back</a>, 

rigth after the:

<div data-role="header" data-add-back-btn="true" style="height: auto">

Like this:

<div data-role="header" data-add-back-btn="true" style="height: auto">
      <a href="#page1" data-icon="arrow-l">Back</a>
<h1>Page 1</h1>
  </div>

With this you can have a back button wherever you want, the only problem is that you have to put a specific page, and you can erase the data-add-back-btn="true"

I hope this could help you or anyone else with this need