在jquery mobile中向左滑动和向右滑动时触发两次？
Posted
技术标签:
【中文标题】在jquery mobile中向左滑动和向右滑动时触发两次？【英文标题】：Firing twice when swipeleft and swiperight in jquery mobile? 【发布时间】：2013-10-27 04:58:27 【问题描述】：我是 jQuery 移动新手。我正在使用滑动概念来滑动多个单独的 html 页面。当我从 swipepage3 到 swipepage2 时，它工作正常。 swipepage2 到 swipepage1 和 swipepage2 到 swipepage3，它会触发两次。如何解决这个问题？
这是我的代码：
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");
);
);
【问题讨论】：
将pagebeforecreate 替换为pageinit 或pageshow 并添加此项以删除页面隐藏$(document).on('pagehide', function () $(this).off('swipeleft swiperight'); ); 上的绑定。
感谢 Omar，我们已经尝试过了，现在可以正常工作了...
@Ramasamy：不要忘记发布并验证您的答案。
【参考方案1】：
这是因为事件为页面绑定了两次。
1.建议使用 .on() 代替 .bind() 我在 pagecreate/init/show 之外使用它，并且我没有遇到 .on 的任何问题 例如。
$('#article1').on('swipeleft', function(event,ui)
$.mobile.changePage("swipepage2.html", "slide");
);
【讨论】：
以上是关于在jquery mobile中向左滑动和向右滑动时触发两次？的主要内容，如果未能解决你的问题，请参考以下文章