jQuery-$ .mobile.changePage无法正常工作

Question

我正在尝试更改项目中的页面。 我有两个包含信息的div，每个div都有一个“页面”的数据角色。 此外，它们都有ID。 在我的js文件中，我有一个简单的onclick事件，该事件调用一个函数，然后使用

          $.mobile.changePage("#2");

从我的第一分部到我的第二分部。 唯一的问题是，每当我尝试更改页面时，都会出现错误：

          Uncaught TypeError: Cannot read property 'changePage' of undefined

我已经搜索了有关堆栈溢出的其他人的帖子，但是没有找到任何可以帮助我的东西。 这是我的一些代码：

global.html

    <html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, user-scalable=no">

    <script src="js/lib/jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile- 
    1.4.5.css">


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

    <script src="js/lib/jquery.mobile-1.4.5.js"></script>
    <script src="js/p5.min.js"></script>
      <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"> 
    </script>
</head>

<body>
   <div data-role="page" id="1" style="background-color: #56f0b1;">
         <button id ="startGame" type="button">Start Game</button>
   </div>

   <div data-role="page" id="2" style="background-color: #56f0b1;">
         <h2>Page 2 </h2>
   </div>

</body>
</html>

global.js

 $(document).ready(function () {
     $("#startGame").on("click",getToNextPage);
 });

 function getToNextPage(){
     $.mobile.changePage("#2");
 }

Answer 1

如评论中所述，核心jQuery库必须在jQuery Mobile之前加载。
在您的代码中，似乎您正在加载两个jQuery版本，其中一个是在jQuery Mobile之后加载的。

另外，根据此问题的注释，页面ID不应仅是数字。

这是一个例子：

 $(document).ready(function() { $("#startGame").on("click", getToNextPage); }); function getToNextPage() { $.mobile.changePage("#page2"); }

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="page" id="page1" style="background-color: #56f0b1;"> <button id="startGame" type="button">Start Game</button> </div> <div data-role="page" id="page2" style="background-color: #56f0b1;"> <h2>Page 2 </h2> </div>

jQuery-$ .mobile.changePage无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-10-24 22:14:02

jQuery-$ .mobile.changePage无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-10-24 22:14:02

解决方案1
1 已采纳 2018-10-24 22:14:02