Question

我已经设置了一个多页面的html文档，当用户在页面的左侧或右侧滑动标签时，在页面之间进行滑动过渡。选项卡应该滑动到哪些页面的信息嵌入在每个页面div顶部的属性中。

初始滑动工作正常一次，但每次连续滑动似乎都会增加，因此下一次擦除会向上移动两页，后续一个四页，依此类推。据我所知，Init函数每个页面都被正确调用一次，但是滑动正在成倍增加。

四处阅读，我怀疑答案是在它一旦发射的时候解开滑动事件，并在页面转换完成后重新绑定它，但我不能为我的生活弄清楚如何......我在这一切都是新手，所以一个简单的解释就会很棒！

以下是相关的HTML：

<div data-role="page" id="intro1" class="page" data-rightTarget= "#intro2" data-
leftTarget= "#intro1">

        <script>
        $("body").on('pageshow', "#intro1", function() {
                          InitIntroSliders ();
                          });
        </script>
...

</div><!-- /intro1 -->  

<div data-role="page" id="intro2" class="page" data-rightTarget= "#intro3" data-     
leftTarget= "#intro1">

        <script>
        $("body").on('pageshow', "#intro2", function() {
                        InitIntroSliders ();
                        });
        </script>
...

 </div><!-- /intro2 -->

...等（似乎我必须将脚本放在div的每个页面而不是整个Head中，以便让他们在每个新页面上重新加载Initialisation脚本）。

这是jQuery：

function InitIntroSliders (){

$(document).on("swipeleft","#righttab", function(){
                var rightTarget = $.mobile.activePage.attr("data-rightTarget");
                $.mobile.changePage($(rightTarget), {transition: 'slide'});
//$(document).off("swipeleft", "#righttab", function());
                });

$(document).on("swiperight","#lefttab", function(){
                var leftTarget = $.mobile.activePage.attr("data-leftTarget");
                $.mobile.changePage($(leftTarget), {transition: 'slide', reverse: 
                'true'});
//$(document).off("swiperight", "#lefttab", function());
                });
}

我已经尝试添加注释掉的线来关闭绑定，但似乎所做的只是让整个事情停止。任何想法非常感谢！贾尔斯

Answer 1

您无需在每个pageShow上绑定处理程序。

jquery mobile防止多个处理程序从单个事件中触发

1 个答案: