Jquery - $.mobile.changePage 不工作
Posted
技术标签:
【中文标题】Jquery - $.mobile.changePage 不工作【英文标题】：Jquery - $.mobile.changePage is not working 【发布时间】：2019-03-29 09:43:46 【问题描述】：我正在尝试更改项目中的页面。我有两个包含信息的 div，它们每个都有一个“页面”的数据角色。此外，它们都有 id。在我的 js 文件中，我有一个简单的 onclick 事件，它调用一个函数，然后使用
$.mobile.changePage("#2");
从我的第一个 div 转到我的第二个 div。唯一的问题是每当我尝试更改页面时都会出现错误：
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");
【问题讨论】：
我认为您需要在 jQuery Mobile 之前包含 jQuery 核心库。见Mobile Page Structure。 你的jquery库需要先于移动库 我相信它已经是了。我在 之前有 > 我的意思是，在您提供的代码中，jquery.mobile-1.4.5.js 包含在 jquery.min.js 之前。这两个需要以相反的顺序加载。
请注意，混合使用 jQuery-UI 和 jQueryMobile 是一个高级主题，两个库都有自己的小部件，在您以正确的方式操作之前，您会遇到一些意想不到的行为。
【参考方案1】：
如 cmets 所述，核心 jQuery 库必须在 jQuery Mobile 之前加载。 在您的代码中，您似乎正在加载两个 jQuery 版本，其中一个是在 jQuery Mobile 之后加载的。
另外，根据this question 中的 cmets，页面 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>【讨论】：
好的，在那个层次结构中我应该在哪里定义我的 global.js 文件？ 我会把它放在最后，在jquery.mobile-1.4.5.min.js之后。以上是关于Jquery - $.mobile.changePage 不工作的主要内容，如果未能解决你的问题，请参考以下文章