同一页面上的 JQuery 页面容器更改锁定答案

【问题标题】：JQuery pagecontainer change on same page locks up同一页面上的 JQuery 页面容器更改锁定
【发布时间】：2016-04-06 18:38:57
【问题描述】：

我正在使用 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;
}

【问题讨论】：

您发布的代码应该可以工作。我在页面容器更改here 上做了一个小型演示，这可能会有所帮助。否则，您需要发布更多代码。
是否设置 allowSamePageTransition: true help？
使用 allowSamePageTransition 确实有帮助。它加载了页面而没有锁定它，但是当我回到使用重新加载时它确实锁定了它。还值得注意的是，使用 reload 并不会在每个页面上都将其锁定。我将粘贴更多源代码，希望有人能帮助我找出问题所在。
我刚刚发现了一篇较早的帖子，其中有人遇到了同样的问题link... 将 all reload: true 更改为 allowSamePageTransition: true 是否安全？

标签： jquery cordova jquery-mobile

【解决方案1】：

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

【讨论】：