title: Scripts not loading after loading new page using AJAX (Barba.js)
body: <p>I'm exploring the option of using AJAX to give elegant page transitions.</p>
  
  <p>I've tried two methods, the first being a manually coded option taken from this page (<a href="https://codyhouse.co/gem/animated-page-transition" rel="nofollow noreferrer">https://codyhouse.co/gem/animated-page-transition</a>) and the second option using Barba.js (<a href="http://barbajs.org" rel="nofollow noreferrer">http://barbajs.org</a>).</p>
  
  <p>With both options the scripts on the website work when the first page is loaded, but when a link is clicked and a different page is loaded via AJAX, none of the scripts work.</p>
  
  <p>Originally I had my scripts loaded into the end of each page using an embedded html file (I'm using ExpressionEngine). After reading a number of posts on this site I thought it might help to put the scripts into their own JS file so that this is cached and each page can then use these scripts but this didn't work either.</p>
  
  <p>Is there a way to tell AJAX or Barba.js to run the scripts each time it changes the page?</p>
  
  <p>Here's my code to start Barba:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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;
          };
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's the script that I'm trying to get to work:</p>
  
  <pre><code>// 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");
  });
  </code></pre>
  
  <p>Thanks in advance,</p>
  
  <p>Tom</p>