本文介绍了在jQuery Mobile向左和向右滑动时触发两次?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是jQuery mobile的新手.我正在使用滑动概念来滑动多个单独的html页面.当我从swipepage3转到swipepage2时，它可以正常工作. swipepage2到swipepage1，swipepage2到swipepage3，它触发了两次.如何解决此问题?
I am new to jQuery mobile. I am using the swipe concept for swiping multiple separate html pages. It's working correctly when I come from swipepage3 to swipepage2. swipepage2 to swipepage1 and swipepage2 to swipepage3, It's firing twice. How to fix this issue?
这是我的代码:
Swipepage1.html
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="slide.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Countries</h1>
</div>
<div data-role="content" class="contentclass">
<p>Newyork</p>
<img src="img/newyork.jpg" style="height:460px;width:600px;"/>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Swipepage2.html
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="swipepage1.html" data-icon="home" data-iconpos="notext">Home</a>
<h1>Countries</h1>
</div>
<div data-role="content" class="contentclass">
<p>Seoul</p>
<img src="img/seoul.jpg" style="height:460px;width:600px;"/>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Swipepage3.html
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-sca le=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="swipepage1.html" data-icon="home" data-iconpos="notext">Home</a>
<h1>Countries</h1>
</div>
<div data-role="content" class="contentclass">
<p>Capetown</p>
<img src="img/capetown.jpg" style="height:460px;width:600px;"/>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
slide.js
$(document).on('pagebeforecreate', function() {
$('#article1').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("swipepage2.html", "slide");
});
$('#article2').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("swipepage3.html","slide");
});
$('#article2').bind('swiperight', function()
{
$.mobile.changePage("swipepage1.html","slide");
});
$('#article3').bind('swiperight', function(event,ui)
{
$.mobile.changePage("swipepage2.html","slide");
});
});
推荐答案
这是因为事件为页面绑定了两次.
This is because the events are getting bind twice for the page.
1.建议使用.on()代替.bind()我在pagecreate/init/show之外使用它，而.on没有遇到任何问题.例如.
1.It is recommended to use .on() instead of .bind()I am using it outside of pagecreate/init/show and I am not facing any issues with .oneg.
$('#article1').on('swipeleft', function(event,ui)
{
$.mobile.changePage("swipepage2.html", "slide");
});
这篇关于在jQuery Mobile向左和向右滑动时触发两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！