全屏滚动插件jquery.fullpage.js中的回调函数中主动触发jquery事件不执行

alpha007
  • 51

全屏滚动插件jquery.fullpage.js中的回调函数中用trigger主动触发jquery事件不执行

<body>
    <div id="h5">
        <div class="page section" id="page-1">
            <div class="component log">logo</div>
            <div class="component slogan">slogan</div>
        </div>
        <div class="page section" id="page-2">
            <div class="component desc">描述信息</div>
        </div>
        <div class="page section" id="page-3">
            <div class="component bar">柱状图</div>
        </div>
    </div>


    <script src="../js/lib/jquery-1.11.1.js"></script>
    <script src="../js/lib/jquery-ui.min.js"></script>
    <script src="../js/lib/jquery.fullPage.js"></script>  
    <script>
        //jquery 1.11.1, jquery-ui 1.10.3, fullPage 2.9.4
        $(function(){
            $(".page").on("onLeave",function(){
                console.log($(this).attr("id"),"==>>","onLeave");
            });

            $(".page").on("onLoad",function(){
                console.log($(this).attr("id"),"==>>","onLoad");
            });  
            
            $("#h5").find(".page").eq(0).trigger("onLeave"); // 页面加载完可以执行

            $("#h5").fullpage({
                'sectionsColor': ['#254875', '#00FF00', '#254587'],
                'onLeave':function(index,nextIndex,direction){
                    console.log(123); // 页面滚动时可以执行
                    $("#h5").find(".page").eq(0).trigger("onLeave"); // 页面滚动时为什么偏偏跳过它不执行呢?
                    console.log(123); // 页面滚动时可以执行
                },
                'afterLoad':function(anchorLink,index){
                }
            });
        });      
    </script>
     


</body>
回复
阅读 3.1k
2 个回答

把script换成cdn的,实测没问题

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
    <script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.extensions.min.js"></script>

在代码中你写到$("#h5").find(".page").eq(0).trigger("onLeave"); // 页面加载完可以执行,这个是没有问题的,但它根fullpage中的回调onLeave并没有半毛关系,你试着再添加一个$('.page').on('xx', function() {})事件,然后再trigger('xx')同样会执行。

在调用fullpage时,onLeave回调中执行trigger('onLeave')或者trigger('xx')都是没有问题的,唯一出现不执行的情况是当你向下滚动到最后一屏,然后再向上滚那一次是不会觖发。

宣传栏