back button is not working in jquery mobile

问题

Hi I have two html files index.html and test.html In both files I have added back button as data-rel="back" when i go from index to test then on test.html when I click back button then it is not navigate to index.html . My index file is as:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>

</head> 
<body> 

    <div id="searchpage" data-role="page" data-theme="b" data-role="content" data-add-back-btn="true">

        <div data-role="header" align="center">

                <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
                <h1>index page</h1>
                <a href="MainMenu.html"  data-icon="grid">Menu</a>          

        </div>

        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" >
                     <input type="text" name="stock" id="enterstock" value="" />

                    <input type="submit" id = "verify" data-role="button">

        </div>

        <script type="text/javascript">

            $("#verify").click(function (e)
            {
                e.stopImmediatePropagation();
                e.preventDefault();
                window.location = "Test.html";
                 //$.mobile.changePage('Test.html')
            });


        </script>


    </div>

</body>
</html>

My test.html is as:

<!DOCTYPE html>
 <html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
    <!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
    <!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 


<body>

    <div id="cash" data-role="page" data-theme="a" data-role="content" data-add-back-btn="true">
        <div data-role="header" align="center">

            <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
            <h1>Test page</h1>
            <a href="MainMenu.html"  data-icon="grid">Menu</a>


        </div>

        <h1>Testing</h1>
    </div>

</body>

</html>

If I use $.mobile.changePage('Test.html') then back button works fine but with window.location = "Test.html"; it is not working. Why is it so? In blackberry5 changePage is not work hence I cant use it. Any suggestion will be appreciated. Thanks in advance

回答1:

data-rel = "Back" works with navigation stack build based on single html pages.

Add your pages into same html file. It apply page enhancement on demand. That is even though two pages are in same html second page don't load to dom until you change to that page.

I guess when you try to play with two htmls dom is not supposed to behave like that. Isn't it.

Place two pages on same html. Thats how they recommend of you want to rely on inbuilt navaigation system.

Your page format is not correct either. Follow a good tutorial first.

回答2:

As noted, data-rel="back" is for pages within a single HTML page.

However, you can try to use the history.back() function. That should simulate the "Back" button on the browser, so if that's the behavior you're looking for, it should work. Give it a try!