** 更新を投稿しようと思いました。
どうやら JQM は、私が試みていた方法でページを処理できないようです。だから私が欲しかったページ構造はこれでした：
"index.html" | |-- サブページ 1 |-- サブページ 2 |-- サブページ 3 など
"page2.html" | |-- サブページ 1 |-- サブページ 2 |-- サブページ 3 など
ページ間を移動するには、左または右にスワイプします。個々のページは問題ありませんが、「index.html」から「page2.html」に移動するとすぐに、mobile.changepage はそれを処理できず、「バグ」が忍び込みます。
**
スワイプ機能を利用するjqueryモバイル（phonegap）アプリを開発しようとしていますが、ここで何かが欠けています.facepalmの瞬間になると確信しています.
私が理解しているように、jqm の動作 (ajax でページを呼び出す場合に最適) では、サイトのすべてのコードを index.html ファイルにロードする必要があります。私がしたこと。次に、 $(document).on('pageinit', '#swipehome', function() を呼び出して、たとえばドキュメントの読み込み、初期化などでコードを実行する必要があります。しかし、ピックアップできない理由を理解できないようです2 ページ目のイベント. 2 つのページがあります (このプロセスをテストするために 2 つ以上になります) index.html & swipe.html
index.html には、*.js & *.css へのすべてのリンクがあります。関数slidepageからswipe.htmlを呼び出します
問題の核心は、swipe.html のスワイプ イベントが取得されないのはなぜですか?
私が理解しているように、jsをindex.htmlページに配置するとajaxページがロードされ、それがリンクされ、2番目のページでそれを利用できますか?
必要なものを示す簡単な jsf を作成しました。
基本的に、index.html からリンクされている swipe.html ページの機能が必要です
どんな助けでも大歓迎です！
ジョージ
これがすべてのコードです！
** main.JS に更新 ** 以下の更新されたコードを使用して、2 ページ目のスワイプ イベントをキャプチャしていますが、ページは変更されていません!!! 「main.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);
}
"index.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>
「swipe.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>
お役に立てれば！