在初始化之前无法调用同位素上的方法

时间:2014-11-02 18:30:44

标签: javascript jquery ajax plugins

我第一次加载页面时,加载OK但是在您输入第一个项目之后,然后返回,它不会加载下面的所有同位素项目(大约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);
        }   
    }

1 个答案:

答案 0 :(得分:1)

由于网站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.