jQuery移动版-移动到下一页/上一页-点击后执行两次操作

jQuery Mobile - move to next/previous pages - performing action twice after click

本文关键字：一页 移动 执行 操作 两次 -点 jQuery      更新时间：2023-09-26

我有一个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);
}

尝试将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();
});
相关文章：