javascript - jQuery Mobile - 移至下一页/上一页 - 单击后执行操作两次

Question

我有一个 JQM 项目 - 多个页面，带有独立的左箭头和右箭头，控制页面之间的移动 - 从第一个开始，然后点击右箭头移动到下一个，然后可能返回，然后转发等等希望你能得到图片..

问题是:当网站加载时，向右箭头照常将您带到下一页，然后当您再次点击向右箭头时，它会跳过下一页并转到下一页之后的页面。它有一个幻灯片动画，您可以看到下一页，但随后完全会再次触发，而无需我触摸它并再次移动到下一页。

我还使用滑动手势来执行相同的功能，并且效果很好。只需点击箭头即可得到此结果。

任何想法都非常欢迎!!

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