JQM-$.mobile.pagecontainer not working on internal pages but working on external pages

问题

I am working on jquery mobile page navigation and facing with strange behaviour of JQM functions.
I have two files main.html,home.html

1.Main.html

 <html>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.2/jquery.mobile-enter code here1.4.2.min.css'>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js'></script>
    </head>
    <body>
    <div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" id="firstHeader">
    <a href="#" onclick="$.mobile.pageContainer.pagecontainer('home.html'{transition:'slide',reverse:true});" class="ui-btn ui-corner-all 
    ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Customer Reg. 1</h1>
    <a href="#secondForm"  class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn icon-left">Next</a> 
</div>
</div>
</body>
</html>

home.html

<html>
<head>
</head>
<body>
<div data-role="page" id="page1">
<link rel="stylesheet" type="text/css" href="../css/cust_reg.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
</div>
</div>
</body>
</html>

After clicking on "Home" of main.html it redirecting to home.html as expected. but after clicking on "Go To Page 2" of home.html(redirected page) it is not redirecting to "page 2" though it is already in home.html. I have tried to use "$.mobile.pageContainer.pagecontainer" and "$mobile.changePage" but it is not working

Any solution?

回答1:

When using Single Page Model, you need to understand that jQuery Mobile loads ONLY first data-role=page in each file.html. It neglects everything else outside that div.

If you want to mix between Single Page and Multi-Page Models, you need to navigate to other pages that contain multi-pages without Ajax.

For example, navigating from main.html to home.html with Ajax enabled, jQM will load page1 div only. If you want to load all pages within home.html, you have to disable ajax this way.

<a href="home.html" rel="external">Home</a>

Note that you will lose transition effect when Ajax is disabled.

来源：https://stackoverflow.com/questions/24284189/jqm-mobile-pagecontainer-not-working-on-internal-pages-but-working-on-external

标签

javascript

jquery

html

jquery-mobile