jQuery Mobile Missing Back Button in Listviews

Question

I think I have read something about there being issues with the Back button in jquery mobile? After looking at docs and demos for using a nested list I am still missing this back button - this is how I am attempting this: (super simplified version because its still having issues)

<div data-role="page">
   <div data-role="header">....</div>

   <div data-role="content">
       <ul data-role="listview">
            <li>Item 1
                 <ul><li>Item 1 - 2</li><li>Item 1 - 3</ul>
            </li>
            <li>Item 2</li>
            <li>Item 3</li>
       </ul>
   </div>

   <div data-role="footer">....</div>
</div>

to my knowledge this should have a list of 3 items - when "Item 1" is clicked it should take you to a second page with a list of 2 Items "Item 1 - 2" and "Item 1 - 3", also on this page should be a header bar with "Item 1" as the header title and there should also be a back button correct??

I have also tried:

<div data-role="page" data-add-back-btn="true">......</div>

If anyone could help me out that would be great. I am using jQuery version 1.6.2 and jQuery Mobile version 1.0b3.

Answer 1

Have you tried changing your global config for the backbutton?

Here's the docs for changing the config: http://jquerymobile.com/test/docs/api/globalconfig.html

Basically you just add something like:

$(document).bind("mobileinit", function(){
  $.mobile.page.prototype.options.addBackBtn = true;
});