ユーザーがページの左側または右側でタブをスワイプしたときに発生するページ間のスライド遷移を使用して、複数ページの html ドキュメントをセットアップしました。タブがスワイプするページに関する情報は、各ページ div の上部にある属性に埋め込まれています。
最初のスワイプは 1 回は正常に機能しますが、連続するスワイプはそれぞれ増加しているように見えるため、次のワイプは 2 ページ分、次のワイプは 4 ページ分、というように続きます。私が把握できる限り、Init 関数はページごとに 1 回正しく呼び出されていますが、スワイプは倍増しています。
読んでみると、答えは、スワイプイベントが一度発生した瞬間にバインドを解除し、ページ遷移が完了したら再度バインドすることだと思いますが、私の人生では方法を理解できません...私は初心者ですこれだけなので、簡単な説明は素晴らしいでしょう！
関連する HTML は次のとおりです。
<div data-role="page" id="intro1" class="page" data-rightTarget= "#intro2" data-
leftTarget= "#intro1">
<script>
$("body").on('pageshow', "#intro1", function() {
InitIntroSliders ();
});
</script>
...
</div><!-- /intro1 -->
<div data-role="page" id="intro2" class="page" data-rightTarget= "#intro3" data-
leftTarget= "#intro1">
<script>
$("body").on('pageshow', "#intro2", function() {
InitIntroSliders ();
});
</script>
...
</div><!-- /intro2 -->
...など（新しいページごとに初期化スクリプトをリロードさせるために、ヘッド全体ではなく各ページのdivにスクリプトを配置する必要があるようです）。
そして、ここにjQueryがあります：
function InitIntroSliders (){
$(document).on("swipeleft","#righttab", function(){
var rightTarget = $.mobile.activePage.attr("data-rightTarget");
$.mobile.changePage($(rightTarget), {transition: 'slide'});
//$(document).off("swipeleft", "#righttab", function());
});
$(document).on("swiperight","#lefttab", function(){
var leftTarget = $.mobile.activePage.attr("data-leftTarget");
$.mobile.changePage($(leftTarget), {transition: 'slide', reverse:
'true'});
//$(document).off("swiperight", "#lefttab", function());
});
}
コメントアウトされた行を追加してバインドをオフにしようとしましたが、すべての作業が停止するようです。どんなアイデアでも大歓迎です！ジャイルズ