Question

我有一个为iOS设计的相当简单的移动应用程序，我正在尝试更新。它是几年前在旧版jQuery和jQuery Mobile上创建的。确切地说，jQuery的2.1.0版本和jQuery Mobile的1.4.2版本。

我现在拥有这两者的最新版本（或者至少它们是我几周前开始这个项目时的最新版本）：jQuery 3.2.1和jQuery Mobile 1.4.5。我几天无法解决的当前问题是所有页面同时显示，而jQuery Mobile应该一次只显示一个。我见过这篇较老的帖子，但解决方法是使用更新版本的jQuery。自从我使用jQuery和jQuery Mobile的最新版本后，我不认为这对我来说是个问题。

All pages are visible in multi page template in jquery mobile

我在下面发布了我的代码，删除了多余的行，如css包含和一些javascript包含。我还删除了每个页面的内容以及页脚中的图像和徽标等.force.js用于与名为Salesforce的数据库服务进行通信，并且工作得很好。它给了我force.login（）函数，它记录用户，然后在成功时运行一个函数。我已经在我的代码中插入了几个警报，以便我可以看到哪里可能出错。我看到每个提醒，直到pagecontainer（“更改”）行。在那一行之后我没有得到“页面更改”警告，所以我假设页面更改代码是我出错的地方。我已尝试使用#mainpage的直接链接，但只是将我滚动到页面上的所有内容仍然一次显示的部分。

<a href="#mainpage">to main page</a>

我还尝试为主页创建第二个HTML文件，并尝试切换到该页面。当我尝试时，我根本没有得到任何警报，仍然在一页上看到了所有内容。我不喜欢不使用多个文件，因为整个应用程序都已经在一个文件中构建了所有页面，所以我没有追求这个想法。

我认为值得一提的是旧应用程序使用了不同的功能来更改页面。

$.mobile.changePage( "#mainpage" , { reverse: false, changeHash: true } );

这非常有效，应用程序的旧版本功能齐全，但这个changePage函数现已弃用，因此将其更改为新版本是我做的第一件事。我已尝试使用已弃用的函数，但它根本不起作用 - 就像当前函数一样。

我还应该提到这是一个cordova应用程序，它是从命令行构建的。我从头开始重新制作应用程序，然后将旧的index.html文件移入其中，并尝试将其更新。

我希望有人可以指出我做错的事情，或者至少指出我正确的方向让应用再次运作。如何让这些页面一次显示一个？

<!DOCTYPE html>
<html>
<head>
    <meta name=“format-detection” content=“telephone=no” />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- include jquery mobile -->
    <script src="jQuery/jquery-3.2.1.js"></script>
    <script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>

    <!-- Include cordova & forceios. -->
    <script src="cordova.js"></script>
    <script src="force.js"></script>

    <script src="index.js"></script>

   <script>
   $(document).ready(function() {
       alert("onLoad: jquery ready");
       document.addEventListener("deviceready", onDeviceReady,false);
       alert("onLoad: deviceready");

   });

    function onDeviceReady() {
        force.login(function() {
            alert("auth succeeded");
            //enable buttons
            addClickListeners();
            alert("buttons setup.  Trying to change page now.");
            //try to change page
            $(":mobile-pagecontainer").pagecontainer("change", $("#mainpage"));
            alert("page changed");
        },
        function(error) {
            alert("Auth failed: " + error);
        }
        );
    }
    </script>
</head>

<body>

    <!-- Login Page -->
    <div data-role="page" data-control-title="Login" data-theme="a" id="loginpage">
        <div data-theme="a" data-role="header">
            <h3>
            Logging in...
            </h3>
        </div>
        <div data-role="content">
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
        </div>
    </div>
    <!-- end of Login Page -->

    <!-- main page -->
    <div data-role="page" data-control-title="Actions" data-theme="a" id="mainpage">
        <div data-theme="a" data-role="header">
            <h3>
                &nbsp;
            </h3>
        </div>
        <div data-role="content">
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
        </div>
    </div>
    <!-- end of main page -->
</body>
</html>

Answer 1

解决方案很简单，当使用JQuery lib时，不使用CDN，只需在本地添加.js和.css文件，然后使用它们即可解决此问题。它对我有用。

所有页面都在jQuery Mobile app

1 个答案: