javascript - 使用 AJAX (Barba.js) 加载新页面后脚本未加载

Question

我正在探索使用 AJAX 来提供优雅的页面转换的选项。

我尝试了两种方法，第一种是从该页面获取的手动编码选项 (https://codyhouse.co/gem/animated-page-transition)，第二种是使用 Barba.js 的选项 (http://barbajs.org)。

对于这两个选项，网站上的脚本在加载第一个页面时工作，但是当单击链接并通过 AJAX 加载不同的页面时，所有脚本都不起作用。

最初我使用嵌入式 html 文件将我的脚本加载到每个页面的末尾(我使用的是 ExpressionEngine)。在阅读了该站点上的许多帖子后，我认为将脚本放入它们自己的 JS 文件中可能会有所帮助，以便将其缓存，然后每个页面都可以使用这些脚本，但这也不起作用。

有没有办法告诉 AJAX 或 Barba.js 在每次更改页面时运行脚本？

这是我启动 Barba 的代码:

<script type="text/javascript">
    $(document).ready(function () {
        // START BARBA.JS
        Barba.Pjax.start();
        // BARBA.JS PAGE TRANSITIONS
        Barba.Pjax.start();
        var FadeTransition = Barba.BaseTransition.extend({
          start: function() {
            /**
             * This function is automatically called as soon the Transition starts
             * this.newContainerLoading is a Promise for the loading of the new container
             * (Barba.js also comes with an handy Promise polyfill!)
             */
            // As soon the loading is finished and the old page is faded out, let's fade the new page
            Promise
              .all([this.newContainerLoading, this.fadeOut()])
              .then(this.fadeIn.bind(this));
          },
          fadeOut: function() {
            /**
             * this.oldContainer is the HTMLElement of the old Container
             */

            return $(this.oldContainer).animate({ opacity: 0 }).promise();
          },
          fadeIn: function() {
            /**
             * this.newContainer is the HTMLElement of the new Container
             * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
             * Please note, newContainer is available just after newContainerLoading is resolved!
             */
            var _this = this;
            var $el = $(this.newContainer);
            $(this.oldContainer).hide();
            $el.css({
              visibility : 'visible',
              opacity : 0
            });
            $el.animate({ opacity: 1 }, 400, function() {
              /**
               * Do not forget to call .done() as soon your transition is finished!
               * .done() will automatically remove from the DOM the old Container
               */
              _this.done();
            });
          }
        });
        /**
         * Next step, you have to tell Barba to use the new Transition
         */
        Barba.Pjax.getTransition = function() {
          /**
           * Here you can use your own logic!
           * For example you can use different Transition based on the current page or link...
           */
          return FadeTransition;
        };
    });
</script>

这是我要开始工作的脚本:

// DROPDOWN MENU
$(function(){
    $("ul.dropdown li").hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").addClass("arrow");
});

提前致谢

汤姆

Answer 1

我不认识 barba.js，但是在 jquery 中我们使用 $(function{...});就像使用 $(document).ready(function(){...});它在文档准备好时启动。动画结束时可能不会启动。我不确定，但您可以尝试创建不同的 View ，并在 onEnter 回调方法中编写您的自定义 javascript 代码:

查看:

<div class="barba-container" data-namespace="homepage">

脚本:

var Homepage = Barba.BaseView.extend({
  namespace: 'homepage',
  onEnter: function() {
      // The new Container is ready and attached to the DOM.
       YOUR JS !!!!

  },
  onEnterCompleted: function() {
      // The Transition has just finished.
  },
  onLeave: function() {
      // A new Transition toward a new page has just started.
  },
  onLeaveCompleted: function() {
      // The Container has just been removed from the DOM.
  }
});

// Don't forget to init the view!
Homepage.init();

http://barbajs.org/views.html