试图将监听器添加到barba.js

Question

使用barba.js制作SPA网站，但我在使用其他插件（fullpage.js）在页面内容更新后触发时遇到问题。

现在我必须点击每个链接两次才能触发fullpage.js

这是我在barba.js修改DOM后需要运行的函数：

$('#fullpage').fullpage({
  //Scrolling
  autoScrolling:false,
  scrollingSpeed: 2500,
  easing: 'swing',
  fitToSection: false,
 });

我试过了：

Barba.Dispatcher.on('initStateChange', function() {
$('#fullpage').fullpage({
    //Scrolling
    autoScrolling:false,
    scrollingSpeed: 2500,
    easing: 'swing',
    fitToSection: false,
 });
});

......但没有任何反应。

脚本包括：

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/footer-reveal.min.js"></script>
<script src="js/jquery.smoothState.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/contact.js"></script>
<script src="js/barba.min.js"></script>
<script src="js/ncscripts.js"></script>

'ncscripts.js'的内容，我的所有功能都在其中：

Barba.Pjax.start();

Barba.Dispatcher.on('initStateChange', function() {
$('#fullpage').fullpage({
    //Scrolling
    autoScrolling:false,
    scrollingSpeed: 2500,
    easing: 'swing',
    fitToSection: false,
 });
});

$('#fullpage').fullpage({
  //Scrolling
  autoScrolling:false,
  scrollingSpeed: 2500,
  easing: 'swing',
  fitToSection: false,
});

$(document).ready(function(){
 $('.owl-carousel').owlCarousel();
});

$(document).ready(function() {
 $('#close-button').click(function() {
    $('#gallery').toggleClass('hidden');
 });
});

$("#button").click(function() {
 $('.cloak-hide').toggleClass('cloak-hide-active');
});

$("#button").click(function() {
 $('.menu-transform').toggleClass('menu-transform-active');
});

$("#button").click(function() {
 $('.resp-font-menu').toggleClass('resp-font-menu-transition-active');
});

$("#button").click(function() {
 $('.menu-footer-content').toggleClass
 ('menu-footer-content-transition-active');
});

$("#button").click(function() {
 $('.logo-black').toggleClass('logo-black-active');
});

$('.burger').click(function(){
 $(this).toggleClass('active');
});

$("#navbar-nav-list-element-left").hover(function() {
 $('.bar-left').toggleClass('bar-active');
});

$("#navbar-nav-list-element-middle").hover(function() {
 $('.bar-middle').toggleClass('bar-active');
});

$("#navbar-nav-list-element-right").hover(function() {
 $('.bar-right').toggleClass('bar-active');
});

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
        $('#logo-black').css({'opacity':(( 60-scroll )/60)});
});

$('#container-master').footerReveal();

不确定如何前进。关于这个问题的任何建议/建设性批评/反馈都将是非常有用的！

*另外，我不确定'ncscript.js'中的函数排列是否最佳（甚至是'正确'）。任何关于最佳实践的建议都将受到赞赏。

Answer 1

试试这个：

Barba.Dispatcher.on('newPageReady', function(current, prev, newContainer) {
$(newContainer).find('#fullpage').fullpage({
    //Scrolling
    autoScrolling:false,
    scrollingSpeed: 2500,
    easing: 'swing',
    fitToSection: false,
 });
});

Answer 2

这最终解决了我的问题：

initFullpagePlugin();

function initFullpagePlugin (parentElement) {
var element;

element = parentElement ? $('#fullpage', parentElement) : $('#fullpage');

if (element.length) {

  // Destroys old fullPage.js object in memory,
  // removes elements from DOM
  if ($.fn.fullpage.destroy) {
    $.fn.fullpage.destroy('all');
  }

  element.fullpage({
    //Scrolling
    autoScrolling:false,
    scrollingSpeed: 2500,
    easing: 'swing',
    fitToSection: false
  });
}
}