0

私の localhost Web サーバーでは、これらのスクリプトは適切に読み込まれ、問題なく機能していますが、私の BlueHost アカウントでは、Isotope にオブジェクトがないというエラーがコンソールに表示されます。

コード：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.isotope.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.infinitescroll.js"></script>

<script type="text/javascript">
$(window).load(function(){
    $.ajaxSetup({ cache: false });
        var $container = $('#articlePost');


            $container.isotope({
                masonry: { columnWidth: $container.width() / 3}
                });


            $(window).smartresize(function(){
                $container.isotope({
                // update columnWidth to a percentage of container width
                masonry: { columnWidth: $container.width() / 3}
            });

            $container.isotope('reLayout');

    });
});

</script>

そして、ここにChromeコンソールエラーがあります:

Uncaught TypeError: Object [object Object] has no method 'isotope' www.theciv.com:92
(anonymous function) www.theciv.com:92
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle
4

1 に答える 1

1

ページには 1.9.1 と 1.8.3 の 2 つのバージョンの jQuery がロードされています。

1つはヘッダーにロードされます（1.9.1）

<script type="application/javascript" src="http://www.theciv.com/wp-content/themes/toolbox/js/jquery-1.9.1.js" /></script>

ワードプレスからもう一つ

<script type='text/javascript' src='http://www.theciv.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

それが理由だと思います。そのうちの1つを削除すると、正常に動作するはずです

または、jQuery.noConflict() と互換性を持たせる

jQuery(function($){
    $.ajaxSetup({ cache: false });
    var $container = $('#articlePost');

    $container.isotope({
        masonry: { columnWidth: $container.width() / 3}
    });

    $(window).smartresize(function(){
        $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 3}
        });

        $container.isotope('reLayout');

    });
});
于 2013-05-20T06:14:42.087 に答える