** 以为我会发布更新。
显然 JQM 无法以我尝试的方式处理页面。所以我想要的页面结构是这样的：
"index.html" | |-- 子页面 1 |-- 子页面 2 |-- 子页面 3 等
"page2.html" | |-- 子页面 1 |-- 子页面 2 |-- 子页面 3 等
并使用向左或向右滑动在页面之间导航！单个页面很好，但是一旦我从“index.html”转到“page2.html”，mobile.changepage 就无法处理，所以“错误”就会出现。
**
我正在尝试开发一个利用滑动功能的 jquery 移动（phonegap）应用程序，但我在这里遗漏了一些东西，我确信这将是一个面对面的时刻，但我无法理解这一点。
据我了解，jqm 的工作方式（使用 ajax 调用页面时最好）我需要将我网站的所有代码加载到 index.html 文件中！我已经做到了。然后我需要调用 $(document).on('pageinit', '#swipehome', function() 例如在文档加载、初始化等时执行代码。但我似乎不明白为什么我不能拾取第二页上的事件。我有两个页面（将更多，但 2 用于测试此过程） index.html 和 swipe.html
index.html 包含指向 *.js 和 *.css 的所有链接。它从功能幻灯片页面调用 swipe.html
现在是问题的症结所在，为什么 swipe.html 上的滑动事件没有被拾取？
据我了解，如果您将 js 放在它链接的 index.html 页面中，那么通过 ajax 页面加载，您可以在第二页中使用它吗？
我创建了一个简单的 jsf 来展示我需要的东西！
基本上我想要从 index.html 链接的 swipe.html 页面中的功能
任何帮助表示赞赏！
乔治
这是所有的代码！
** 更新到 main.JS ** 我现在正在使用下面更新的代码在第二页中捕获滑动事件，但页面没有改变！！！“主.js”
/* === UPDATED CODE === */
$(document).on('swipe', '#swipehome', function() {
console.log('Changing to #swipepage1');
$.mobile.changePage('#swipepage1','slide',false,true);
console.log('End');
});
//Initialise the slider on the swipe page
$(document).on('pageinit', '#swipehome', function() {
$("#home").swiperight(function() {
$.mobile.changePage("#page1",{ transition: "slide" , reverse: true});
});
$("#home").swipeleft(function() {
$.mobile.changePage("#page2",{ transition: "slide"});
});
$("#page1,#page2").swipe(function() {
$.mobile.changePage("#swipehome", { transition: "fade"});
});
});
//Initialise the slider on the test page
$(document).on('pageinit', '#testg', function() {
$('#foobar').bxSlider({
touchEnabled: true,
pager: false,
pagerSelector: false
});
});
$(document).bind( "mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
function slidePage(page) {
$.mobile.changePage(page,{'transition': "slide"});
console.log(page);
}
“索引.html”
<!DOCTYPE html>
<html>
<head>
<title>swipe test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- STYLESHEETS //-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0-rc.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- JavaScripts //-->
<script src="js/cordova-2.5.0.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/database.js"></script>
<script src="js/audio.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div data-role="page" id="start">
<div data-role="content">
<div style="margin: 0 auto;">
<a href="#" onClick="slidePage('swipe.html');" class="next" data-role="button" data-theme="a" style="width: 150px; margin: 0 auto;">Swipe</a>
</div>
</div>
</div>
</body>
</html>
“刷卡.html”
<!DOCTYPE html>
<html>
<body>
<div data-role="page" id="swipehome">
<div data-role="content">
<p>Swipe left or right to change pages</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<p>You Swiped right<br/>Swipe any direction to go back</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>You Swiped left<br/>Swipe any direction to go back</p>
</div>
</div>
</body>
</html>
希望这可以帮助！