PJAX/DJAX- повторные скрипты после загрузки pjax

Question

Я использую RequireJS для структурирования своих JS и DJAX (в основном PJAX) в качестве способа динамической загрузки контента без полной перезагрузки страницы.

Проблема заключается в том, что после того, как DJAX завершил загрузку содержимого, мне нужно перезапустить мои скрипты (например, скрипт, который добавляет несколько изображений в карусель), чтобы новая страница отображалась правильно. Я думал, что лучший способ сделать это будет просто повторно запустить функцию я бег на $(document).ready();, но я получаю этот вывод в консоли:

Uncaught TypeError: Cannot read property 'djaxLoad' of undefined 

, который со ссылкой на эту линию в багажных сообщениях .js

bootstrap.init(); 

Я предполагаю, что я пишу что-то неправильно.

Вот bootstrap.js это мой главный файл, который запускает на document.ready и инициализирует все мои модули

require(['base/responsive', 'base/main-menu', 'base/social-share', 'base/randomise-colours', 'base/infinite-scroll', 'base/load-posts', 'base/image-fade', 'base/carousel', 'base/misc'], 
    function(responsive, main_menu, social_share, randomise_colours, infinite_scroll, load_posts, image_fade, carousel, misc) { 

      var $ = jQuery; 

      function djaxLoad() { 
       //If page has JS (detected with Modernizr) then hide content until the 
       //doc is ready to avoid flash of unstyled content 
       $('#djax-container').css('display', 'block'); 

       main_menu.init(); 
       social_share.init(); 
       randomise_colours.init(); 
       load_posts.init(); 
       image_fade.init(); 
       infinite_scroll.init(); 
       carousel.init(); 
       misc.init(); 

       responsive.init(); 
      } 

      $(document).ready(djaxLoad); 
    } 
); 

И это нагрузка-posts.js который обрабатывает DJAX для меня. DJAX работает, мне просто нужно снова запустить сценарии.

define(['djax', 'base/bootstrap'], function(djax, bootstrap) { 

    var $ = jQuery, 
     $body = $('body'); 

    return { 

     init: function() { 
      if($body.length >= 1) { 
       this.setUp(); 
      } else { 
       return false; 
      } 
     }, 

     setUp: function() { 
      this.pjaxLinks(); 
     }, 

     pjaxLinks: function() { 
      //Initialise DJAX, but stop it from running on pagination links (URL is /page...) 
      $('body').djax('.updateable', ['page']); 

      //When clicking a djax link 
      $(window).bind('djaxClick', $.proxy(function() { 
       this.addLoader(); 
      },this)); 

      //When the new content has loaded in 
      $(window).bind('djaxLoad', $.proxy(function() { 
       this.removeLoader(); 
      },this)); 
     }, 

     addLoader: function() { 
      $body.addClass('loader-visible'); 
     }, 

     removeLoader: function() { 
      $body.removeClass('menu-visible'); 
      $('html, body').scrollTop(0); 
      function removeLoaderDelay() { 
       $body.removeClass('loader-visible'); 
       bootstrap.djaxLoad(); 
      } 
      setTimeout(removeLoaderDelay, 1000); 
     } 

    }; 

}); 

djaxClick функция работает на ссылку мыши и функция djaxLoad запускается после того, как содержание было загружено в. Я добавляю загрузчик накладку на страницу, а затем удалить его после того, как содержание загружен.

Answer 1

Немного поздно, но для справок в будущем: В документации по адресу https://github.com/beezee/djax вы найдете событие djaxLoad. Это специально сделано для вашего использования. Вы можете использовать его следующим образом:

$(window).bind('djaxLoad', function(e, data) { 
    // your scripts to run on ajax-calls 
}); 

Сайт далее поясняет: «объект данных, переданная с событием содержит требуемый URL, название страницы для запрашиваемой страницы, а содержимое запрашиваемой страницы в виде строки ».

$(window).bind('djaxLoad', function(e, data) { 
    var responseObj = $('<div>'+data.response+'</div>'); 
    //do stuff here 
});