2

jQueryモバイルは初めてです。複数の個別のhtmlページをスワイプするためにスワイプの概念を使用しています。swipepage3 から swipepage2 に移動すると、正しく動作します。swipepage2 から swipepage1 へ、swipepage2 から swipepage3 へ、2 回発火しています。この問題を解決するにはどうすればよいですか?

これが私のコードです：

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>

スライド.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"); 
});
});
4

1 に答える 1

0

これは、イベントがページに対して 2 回バインドされているためです。

1. .bind() の代わりに .on() を使用することをお勧めします。私は pagecreate/init/show の外で使用していますが、.on などの問題に直面していません。

$('#article1').on('swipeleft', function(event,ui)
{
    $.mobile.changePage("swipepage2.html", "slide"); 
});
于 2014-04-07T05:27:25.417 に答える