Question

我正在使用Cordova 6.1.1，JQuery 2.1.4和JQueryMobile 1.4.5。如果我已经在main.html上并将页面更改为main.html，则页面会锁定，并且没有任何内容可以点击。有人能告诉我为什么会这样吗？我使用下面的代码来更改页面。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
        <meta name="description" content="My App" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    </head>

    <body>
        <div id="mainPage" data-role="page">
            <div data-role="header" data-theme="c">
                <button id="logout" data-role="button" data-inline="true" data-mini="true">Logout</button>              
                <h1>Header 1</h1>
            </div><!-- /header -->
            <div role="main" class="ui-content">
                <div id="current"></div>                
                <button id="button1" class="ui-btn ui-btn-b ui-corner-all top-margin-1-5">Button 1</button>
                <button id="button2" class="ui-btn ui-btn-b ui-corner-all top-margin-1-5">Button 2</button>
                <button id="button3" class="ui-btn ui-btn-b ui-corner-all top-margin-1-5">Button 3</button>
            </div><!-- /content -->
        </div><!-- /page -->    
    </body>
</html>

的Javascript

$(document).on("pagebeforeshow", "#mainPage", function() {
    var $mainPage = $("#mainPage");
    var $button1 = $("#button1", $mainPage);        
    var $button2 = $("#button2", $mainPage);
    var $button3 = $("#button3", $mainPage);
    var $logout = $("#logout", $mainPage);

    $logout.off("click").on("click", function(e) {
        e.preventDefault();
        // do something
    });

    $button1.off("click").on("click", function(e) {
        e.preventDefault(); 
        $("body").pagecontainer("change", "main.html", {reload: true}); // locks up page            
    });

    $button2.off("click").on("click", function(e) {
        e.preventDefault();
        $("body").pagecontainer("change", "main.html", {allowSamePageTransition: true}); // doesn't lock up page
    });

    $button3.off("click").on("click", function(e) {
        e.preventDefault();
        // do something
    });
});

CSS

h1,h2,h3,h4,h5 {
    color:#0071bc;
}
/* Change border radius of icon buttons */
.ui-btn-icon-notext.ui-corner-all {
    -webkit-border-radius: .3125em;
    border-radius: .3125em;
}
/* Change color of JQuery Mobile page headers */
.ui-title {
    color:#fff;
}
/* Center-aligned text */
.text-center {
    text-align:center;
}
/* Top margin for some elements */
.top-margin-1-5 {
    margin-top:1.5em;
}
h2.text-danger,
h3.text-danger  {
    color:red;
}

Answer 1

我最后将所有重新加载调用更改为allowSamePageTransition。

同一页面上的JQuery pagecontainer更改锁定

1 个答案: