jQuery Mobile - 移至下一個/上一個頁面 - 單擊後執行兩次操作

Question

我有一個JQM項目 - 多個頁面有一個左箭頭和右箭頭，與它們無關，控制頁面之間的移動 - 從第一頁開始，然後點擊右箭頭移動到下一個，然後可能回來，然後等等等等，希望你能得到圖片..

問題是：當網站加載時，右箭頭帶你到下一頁作爲正常，那麼當你再次點擊右箭頭時，它會跳過下一頁，並進入下一頁之後的頁面。它有一個幻燈片ani，你可以看到下一頁，但是然後完全再次發射而沒有我觸摸它並再次移動到下一個。

我也使用滑動手勢執行相同的功能，他們工作精美。只需點擊箭頭即可獲得此結果。

任何想法感激地歡迎！

JS：

$(document).bind('pagecreate', function (e) { 

/Navigation for next/prev arrows 

    $(document).on('click', '.right-arrow', function() { 

    if ($.mobile.activePage.next('.page-container').length !== 0) { 
    var next = $.mobile.activePage.next('.page-container'); 

    resetCasePages() 
    $.mobile.changePage(next, { 
    transition: 'slide' 
    }); 

} 
event.stopImmediatePropagation(); 
}); 

$(document).on('click', '.left-arrow', function() { 

    if ($.mobile.activePage.prev('.page-container').length !== 0) { 
    var prev = $.mobile.activePage.prev('.page-container'); 

    resetCasePages() 
    $.mobile.changePage(prev, { 
    transition: 'slide', 
    reverse: true 
    }); 

    } 
event.stopImmediatePropagation(); 
}); 


//Swipe to the right of screen (swipeleft) 

$(".page-container").on("swipeleft", swipeHandler); 

function swipeHandler(event){ 

if ($.mobile.activePage.next('.page-container').length !== 0) { 
    var next = $.mobile.activePage.next('.page-container'); 
    resetCasePages() 
    $.mobile.changePage(next, { 
    transition: 'slide' 
    }); 
    } 
    event.stopImmediatePropagation(); 
} 


//Swipe to the left of screen (swiperight) 

$(".page-container").on("swiperight", swipeHandler2); 

function swipeHandler2(event){ 

    if ($.mobile.activePage.prev('.page-container').length !== 0) { 
    var prev = $.mobile.activePage.prev('.page-container'); 
    resetCasePages() 
    $.mobile.changePage(prev, { 
    transition: 'slide', 
    reverse: true 
    }); 
    } 
    event.stopImmediatePropagation(); 
} 
}); 
}); 

//function to reset case pages on arrow 

function resetCasePages() { 
$('.rationale-box').hide(); 
$('.answer-yes').removeClass('correct-style'); 
$('.answer-yes').removeClass('incorrect-style'); 
$('.answer-no').removeClass('correct-style'); 
$('.answer-no').removeClass('incorrect-style'); 
$('.incorrect').removeClass('inhibit'); 
} 

//function diagnosis pages 
function diagnosisPages() { 

$("#slider").slider('value',2); 
} 

Answer 1

嘗試增加event作爲參數傳遞給您的單擊功能你在你刷卡的聽衆做。

$(document).on('click', '.right-arrow', function (event) { 

    if ($.mobile.activePage.next('.page-container').length !== 0) { 
    var next = $.mobile.activePage.next('.page-container'); 

    resetCasePages() 
    $.mobile.changePage(next, { 
    transition: 'slide' 
    }); 

} 
event.stopImmediatePropagation(); 
}); 

$(document).on('click', '.left-arrow', function (event) { 

    if ($.mobile.activePage.prev('.page-container').length !== 0) { 
    var prev = $.mobile.activePage.prev('.page-container'); 

    resetCasePages() 
    $.mobile.changePage(prev, { 
    transition: 'slide', 
    reverse: true 
    }); 

    } 
event.stopImmediatePropagation(); 
});