Question

我正在使用RequireJS来构建我的JS和DJAX（基本上是PJAX），以便在没有完整页面重新加载的情况下动态加载内容。

我遇到的问题是，在DJAX完成加载内容后，我需要重新运行我的脚本（例如，将多个图像添加到轮播中的脚本），以便新页面正确呈现。我认为最好的方法是简单地重新运行我在$(document).ready();上运行的函数，但是我在控制台中得到了这个输出：

Uncaught TypeError: Cannot read property 'djaxLoad' of undefined

指的是 load-posts.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);
    }
);

这是 load-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
});

该网站进一步解释：＆＃34;随事件传递的数据对象包含请求的URL，请求页面的页面标题以及请求页面的内容为字符串＆＃34;。

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

pjax加载后PJAX / DJAX-重新运行脚本

1 个答案: