javascript - 初始化前无法在同位素上调用方法

第一次加载页面时，加载成功，但是例如在您输入第一个项目然后返回时，它不会加载下面的所有同位素（大约50个），并且显示“不再发布”这显然是不正确的。

我收到此错误：初始化前无法在同位素上调用方法；试图称呼“追加”

这是我正在处理的site。

知道问题出在哪里吗？这是我的代码：

    function initBlog(){
        "use strict";

        if($j('.blog_holder.masonry').length){
            var width_blog = $j(this).closest('.container_inner').width();
            if($j('.blog_holder.masonry').closest(".column_inner").length) {
                width_blog = $j('.blog_holder.masonry').closest(".column_inner").width();
            }
            $j('.blog_holder.masonry').width(width_blog);
            var $container = $j('.blog_holder.masonry');
            var $cols = 3;

            if($container.width() < 420) {
                $cols = 1;
            } else if($container.width() <= 805) {
                $cols = 2;
            }

            $container.isotope({
                itemSelector: 'article',
                resizable: false,
                masonry: { columnWidth: $j('.blog_holder.masonry').width() / $cols }
            });
            $j('.filter').click(function(){
                var selector = $j(this).attr('data-filter');
                $container.isotope({ filter: selector });
                return false;
             });
            if( $container.hasClass('masonry_infinite_scroll')){
                $container.infinitescroll({
                    navSelector  : '.blog_infinite_scroll_button span',
                    nextSelector : '.blog_infinite_scroll_button span a',
                    itemSelector : 'article',
                    loading: {
                        finishedMsg: finished_text,
                        msgText  : loading_text
                      }
                    },
                    // call Isotope as a callback
                    function( newElements ) {
                      $container.isotope( 'appended', $j( newElements ) );
                      fitVideo();
                      fitAudio();
                      initFlexSlider();
                        setTimeout(function(){
                            $j('.blog_holder.masonry').isotope( 'layout');
                        },400);
                    }
                );
            }else if($container.hasClass('masonry_load_more')){


                var i = 1;
                $j('.blog_load_more_button a').on('click', function(e)  {
                    e.preventDefault();

                    var load_more_holder = $j('.blog_load_more_button');
                    var load_more_loading = $j('.blog_load_more_button_loading');
                    load_more_holder.hide();
                    load_more_loading.show();

                    var link = $j(this).attr('href');
                    var $content = '.masonry_load_more';
                    var $anchor = '.blog_load_more_button a';
                    var $next_href = $j($anchor).attr('href');
                    $j.get(link+'', function(data){
                        var $new_content = $j($content, data).wrapInner('').html();
                        $next_href = $j($anchor, data).attr('href');
                        $container.append( $j( $new_content) ).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
                        fitVideo();
                        fitAudio();
                        initFlexSlider();
                        setTimeout(function(){
                            $j('.blog_holder.masonry').isotope( 'layout');
                        },400);

                        load_more_holder.show();
                        load_more_loading.hide();

                        if($j('.blog_load_more_button span').attr('rel') > i) {
                            $j('.blog_load_more_button a').attr('href', $next_href); // Change the next URL
                        } else {
                            $j('.blog_load_more_button').remove();
                        }
                    });
                    i++;
                });

            }
            $j(window).resize(function(){
                if($container.width() < 420) {
                    $cols = 1;
                } else if($container.width() <= 785) {
                    $cols = 2;
                } else {
                    $cols = 3;
                }
            });

        $j('.blog_holder.masonry').animate({opacity: "1"}, 500);
        }
    }

最佳答案

由于站点中infinitescroll失败，因此无法正常工作，找不到navSelector: '.blog_infinite_scroll_button span'元素

我看到它在您的网站中给出了以下错误，该错误来自无限滚动插件。
TypeError: Cannot read property 'debug' of undefined

Recommendation from isotope specs for Adding Items是，使用insert代替appended


  同位素-具有过滤或排序功能的无限滚动


我建议不要将Infinite Scroll与过滤或排序一起使用。这种结合产生了不必要的复杂用户交互，这会使您的用户感到沮丧。添加了新内容，但其中一部分可能被隐藏了。当Infinite Scroll添加更多内容时，用户无法得知隐藏或重新排列的内容。在同位素实现中进行节制。

如果您打算通过过滤或排序来实现无限滚动（这是个坏主意），请使用insert方法而不是appended.

关于javascript - 初始化前无法在同位素上调用方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26702831/