Question

我尝试构建一个锻炼应用程序，您可以向右和向左滑动以查看下一个练习（在您的移动设备上）。我已经对Jquery移动文档和stackoverflow进行了研究，但我无法弄清楚我的错误在哪里。得到一个人的暗示会很棒。

基本上问题是：它的工作率为95％，但有时我的滑动事件会更频繁地触发或触发。（但我知道冒泡但仍然无法找到错误）

由于练习来自数据库，我构建了data-role =“page”，并在evercises上使用for循环。这是我的代码。你可以尝试一下 - ＆gt;有时它会刷到错误的页面

<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';

＆GT;

<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?>

Answer 1

这只是一个理论，因为你没有发布你的整个页面，但我猜你有多个事件绑定的问题。由于此页面滑动会触发一次以上。

要解决这个可能的问题，你需要修复所有的函数绑定（页面事件绑定除外，如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/

Jquery移动滑动导航触发奇怪

1 个答案: