在jquery mobile中swipeleft和swiperight時發射兩次？

我是jQuery手機新手。我正在使用滑動概念來滑動多個單獨的html頁面。當我從swipepage3到swipepage2時，它正常工作。 swipepage2 swipepage1和swipepage2 swipepage3，它發射兩次。如何解決這個問題？在jquery mobile中swipeleft和swiperight時發射兩次？

這裏是我的代碼：

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"); 
}); 
});

來源

2013-10-18 Ramasamy

與'pageinit'或'pageshow'替換'pagebeforecreate'並添加此以去除pagehide'$（文件）。在（ 'pagehide'，函數（）{$（本）.off結合（」 swipeleft swiperight'）;}）;'。 – Omar

你有試過嗎？ – Omar

謝謝奧馬爾，我們已經嘗試過了，現在它的工作很好... – Ramasamy

這是因爲該事件是在頁面獲取綁定的兩倍。

1.It建議使用。對（），而不是.bind（）我使用它的pagecreate /初始化/節目之外，我不面臨着。對如任何問題。

$('#article1').on('swipeleft', function(event,ui) 
{ 
    $.mobile.changePage("swipepage2.html", "slide"); 
});

來源

2014-04-07 05:27:25

在jquery mobile中swipeleft和swiperight時發射兩次？

回答

相關問題