使用barba.js创建SPA站点,但是在更新页面内容后无法使用我正在使用(fullpage.js)触发的另一个插件时遇到麻烦。

现在,我必须单击每个链接两次以触发fullpage.js
javascript - 尝试将监听器添加到barba.js-LMLPHP

这是在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”中的功能安排是否最佳(甚至“正确”)。关于最佳做法的任何建议将不胜感激。

最佳答案

尝试这个:

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

关于javascript - 尝试将监听器添加到barba.js,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44443024/

10-11 12:46
查看更多