时间戳

首页 > 解决方案 > fullpage.js 在 reBuild() 之后删除事件侦听器

jquery - fullpage.js 在 reBuild() 之后删除事件侦听器

问题描述

我尝试在此站点https://frontendsite.bitbucket.io/#twoPage上使用 fullpage.js 。#twoPage 部分中有可折叠的内容。

我正在初始化整页插件

var myFullpage;
function initFullPage() {
myFullpage = new fullpage('#fullpage',{

 navigation: true,
    navigationPosition: 'right',
    scrollOverflow: true,
    scrollOverflowOptions: {click: false},
      scrollOverflowReset: true,
      afterLoad: function(anchorLink, index){
      var loadedSection = $(this);
      var nextSection = loadedSection.next();
      var prevSection = loadedSection.prev();
      if(nextSection.hasClass('fp-auto-height') ) {
        var IScroll = nextSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, 0, 0)
      }
      if(prevSection.hasClass('fp-auto-height') ) {
        var IScroll = prevSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, IScroll.maxScrollY, 0)
      }
  },
    anchors: ['firstPage', 'twoPage', '3rdPage', 'foursPage'],

 });

}

我添加了单击侦听器，目的是通过 jQuery 显示/隐藏可折叠内容

$('.plus_icon.question').click(function( ){
      var a = $(this).siblings('.answer');
      a.toggleClass('open');
      $(this).toggleClass('rotate');
      myFullpage.reBuild();
    });

但是在使用“.answer”单击回调显示/隐藏可折叠内容一次后不起作用，但如果我使用 myFullPage.reBuild() 注释行，它会起作用。是 fullpage.js 的错误还是我错误地使用了插件？

标签： jqueryfullpage.js

解决方案

首先，请记住，您需要获得 fullPage.js 许可证才能合法使用它。

第二。您可以使用afterRebuild回调：

new fullpage('#fullpage',{
    afterRender: function(){
         bindMyEvents();
    },
    afterReBuild: function(){
        bindMyEvents();
    }
});

function bindMyEvents(){
    $('.plus_icon.question').click(function( ){
      var a = $(this).siblings('.answer');
      a.toggleClass('open');
      $(this).toggleClass('rotate');
      myFullpage.reBuild();
    });
}

或者，更容易使用 jquery 事件委托：

new fullpage('#fullpage',{OPTIONS HERE});

$(document).on('click, '.plus_icon.question', function( ){
  var a = $(this).siblings('.answer');
  a.toggleClass('open');
  $(this).toggleClass('rotate');
  myFullpage.reBuild();
});

推荐阅读