Question

我正在使用砌体在网格中布置项目的网站上工作。当最终用户单击网站上的过滤器时，这是被调用的函数。重要的是，我直接提到服务器端代码是正确的。不正确的是我的jQuery代码。

<script>
function filter(type) {
  $.get("/storefront/?filter="+type, function(data) {
     var $data = data;
     $('.grid').children().remove();
     $('.grid').masonry().append( $data ).masonry( 'appended', $data, true ).masonry( 'layout' );
  });
}

调用此函数时，网格消失，未显示任何新的过滤数据，并且我在Chrome控制台中收到了函数中LAST行的以下错误。

uncaught typeerror: undefined is not a function

有什么奇怪的，也证明我的服务器端代码是正确的，如果我改变：

$('.grid').masonry().append( $data ).masonry( 'appended', $data, true ).masonry( 'layout' );

到此：

$('.grid').append( $data );

它加载了所有数据，除了整个网格向上移动100px外，它的格式也很完美。

导致错误的代码行是许多项目的完全复制品，这些项目使用砌体并使其工作，所以我不明白为什么我的不是，我不知道它是否是一个简单的语法错误或更深层次的东西。

作为一种解决方法，我试图破坏砌体布局并初始化一个新的但我甚至不确定如何做到这一点，因为首先将砌体初始化的代码实际上在我的Animonscroll.js中图书馆。这是代码的一部分（我无法遵循）。

animonscroll.js

    imagesLoaded( this.el, function() {

    // initialize masonry
    new Masonry( self.el, {
        itemSelector: 'li',

        gutter: 14,
        transitionDuration : 0
    } );

    if( Modernizr.cssanimations ) {
        // the items already shown...
        self.items.forEach( function( el, i ) {
            if( inViewport( el ) ) {
                self._checkTotalRendered();
                classie.add( el, 'shown' );
            }
        } );

Answer 1

错误undefined is not a function通常发生在Javascript中有undefined的对象，并且在其后面放置括号()时，就好像您正在尝试调用它一样像一个函数。

例如：

var a = undefined;
a();    // undefined is not a function

代码中的某处（使用调试器会更容易看到，或者如果将代码拆分为多行），您有一个评估为undefined的对象，但是您需要使用它作为一个功能。

现在，对于您的代码 - 看起来您已经将问题缩小到此行失败：

$('.grid').masonry().append( $data ).masonry( 'appended', $data, true ).masonry( 'layout' );

这个替代行有效：

$('.grid').append( $data );

基于此，您在“失败”行中评估为功能的唯一内容是masonry和append - 基于该信息，其中一个（或内部调用的内容）是undefined。

作为另一个调试提示，您还可以使用console.log输出信息，例如console.log($('.grid').masonry);等。如果masonry是undefined，那么它很可能加载该脚本时出现问题。

希望能帮助您缩小范围！

Answer 2

我不确定你为什么要在追加之前调用masonry（）：

$('.grid').masonry().append( $data ).masonry( 'appended', $data, true ).masonry( 'layout' );

试试这个：

$('.grid').append( $data ).masonry( 'appended', $data, true ).masonry( 'layout' );

为什么我在砌体上附加物品的代码给我“未定义”不是一个功能＆＃39;？

2 个答案: