jquery移动滑动导航触发奇怪答案

【问题标题】：Jquery mobile swipe navigation triggers strangejquery移动滑动导航触发奇怪
【发布时间】：2014-06-12 05:48:11
【问题描述】：

我尝试构建一个锻炼应用程序，您可以在其中左右滑动以查看下一个锻炼（在您的移动设备上）。我已经对 Jquery 移动文档和 stackoverflow 进行了研究，但我就是不知道我的错误在哪里。能得到某人的暗示会很棒。

基本上问题是：它工作 95%，但有时我的滑动事件触发更频繁或什么的。（但我知道冒泡但仍然找不到错误）

由于练习来自数据库，因此我使用 for 循环在 evercises 上构建了 data-role="page"。这是我的代码。您可以尝试一下 -> 有时它会滑动到错误的页面

<html>
<body>

 <?php for($i = 2; $i < 6; $i++){ 

$num = $i;
if($i > 2) $prev = 'uebung_'. ($num-1);
else    $prev = ''; 
if ($i < 6) $next = 'uebung_'. ($num+1);
else $next = '';

?>   
 <div id="uebung_<?php echo $i;?>" data-role="page" class="uebungen_pages" data-dom-cache="true"  data-prev="<?php echo $prev;?>" data-next="<?php echo $next;?>">

 <?php
 // some short Jquery Mobile panel+header
include 'panel.php'; 
include 'header.php';

<div data-role="content" class="ui-content grey_backg">
     <h1>PREV: <?php echo $prev;?></h1>
    <h3> NEXT: <?php echo $next;?> </h3>
    <h3> i: <?php echo $i;?> </h3>
    <h5> awoidh </h5>


    <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
        <!-- prev && back button -->    
    </div>
      </div><!-- /content -->

$( document ).on( "pageinit", "[data-role='page'].uebungen_pages", function() {
    var page = "#" + $( this ).attr( "id" ),

        // Get the filename of the next page that we stored in the data-next attribute
        next = $( this ).jqmData( "next" ),

        // Get the filename of the previous page that we stored in the data-prev attribute
        prev = $( this ).jqmData( "prev" );

    // Check if we did set the data-next attribute
    if ( next ) {

        // Prefetch the next page
        $.mobile.loadPage( "#"+next);

        // Navigate to next page on swipe left
        $( document ).on( "swipeleft", page, function() {

            $.mobile.changePage( "#"+next, { transition: "slide" });
        });
        /*
        // Navigate to next page when the "next" button is clicked
        $( ".control .next", page ).on( "click", function() {
            $.mobile.changePage( next + ".html", { transition: "slide" } );
        });
        */
    }

 // Disable the "next" button if there is no next page
else {
        $( ".control .next", page ).addClass( "ui-disabled" );
    }
    // The same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
    if ( prev ) {
        $( document ).on( "swiperight", page, function() {

            $.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
        });
        $( ".control .prev", page ).on( "click", function() {
            $.mobile.changePage(  '#'+prev , { transition: "slide", reverse: true } );
        });
    }
    else {
        $( ".control .prev", page ).addClass( "ui-disabled" );
    }
});

 <?php } //end for $I?>

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

这只是一个理论，因为您没有发布整个页面，但我猜您在多事件绑定方面存在问题。因为这个页面滑动触发不止一次。

要解决这个可能的问题，您需要修复所有 on 函数绑定（除了页面事件绑定，如 pageinit、pageshow）。

你需要做的是改变这个：

$( document ).on( "swiperight", page, function() {
    $.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
});

到这里：

$( document ).off("swiperight", page).on("swiperight", page, function() {
    $.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
});

在每次装订时都这样做。这通常是 jQuery Mobile 特有的问题。

看看我自己的页面滑动示例：http://jsfiddle.net/Gajotres/JB22E/

【讨论】：

谢谢先生！以前我试过 .off("swiperight").on("swiperright,page 等等...) 但我忘记了 off("swiperright",PAGE)...