monacaでアプリを作りたいと思い色々な動作をさせているのですが、スワイプ操作ができません。
コードに何か間違いなどありましたらお教え頂けると助かります。
よろしくお願いいたします。
※ヘッダーとボディを記載するとコードがおかしくなったため省きました
index.html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="components/monaca-jquery/jquery.mobile.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.ready(function() {
/* 前ページにスワイプ */
$(document).on('swiperight', '.center', function(event) { });
/* 次ページにスワイプ */
$(document).on('swipeleft', '.center', function(event) {
mynavigator.pushPage( "page2.html" );
});
});
</script>
<ons-navigator id="mynavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
<ons-gesture-detector>
<ons-page>
<div class="center">Page 1</div>
<p>This is the first page.</p>
</ons-page>
</ons-gesture-detector>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>This is the second page.</p>
</ons-page>
</ons-template>