Navigate between three pages in two different files in JQuery Mobile

问题

Why can't I navigate from second.html to the other inner page #page3 ?.

I am able to navigate from index.html to second.html. My code is as shown below :

index.html page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
<script>
    $(document).on('pagebeforeshow', "#index",function () {
        $(document).on('click', "#changePage",function () {     
            $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
        }); 
    }); 


</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
    <div data-role="header">
        <h3>
            First Page
        </h3>
    </div>
    <div data-role="content">
      <a data-role="button" id="changePage">Test</a>
    </div> <!--content-->
</div><!--page-->

</body>
</html>

second.html page

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<script type="text/javascript">
      alert("Inside the Second Page");
      $(document).on('pagebeforeshow', "#second",function () {
        //$(document).ready(function(e) {
        var parameters = $(this).data("url").split("?")[1];
        parameter = parameters.replace("parameter=","");  
        alert(parameter);
    }); 

    function move(){
        alert("moving...");
         $.mobile.changePage('#third');
         alert("moved !!!");
    }

</script>
    <div data-role="header">
        <h3>
            Second Page
        </h3>
    </div>
    <div data-role="content">

    <a href="#third" onClick="move()" data-role="button">Go to Property Page</a>

    </div> <!--content-->
</div><!-- second page-->

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

<script type="text/javascript">
   alert("Inside Third Page...");
</script>

</div>!-- third page-->

</body>
</html>

In second.html page the second alert message is also shown but the page navigation never happens ???. Could anyone please let me know what am I missing here or am I doing something wrong here ?.

回答1:

Unfortunately this is not going to work. This is simply a downside of using multiple HTML template solution with jQuery Mobile.

Basically if you decide to work with multiple HTML pages only first HTML can have more then 1 page because that whole page will be loaded into the DOM.

If ajax is used to load pages (default page handling), when second html is loaded into the DOM only the first page is going to be loaded, every other pages including the page HEAD will be discarded.

You can do 2 things to fix this problem: