为什么我的将项目追加到砌体中的代码给我“未定义的不是函数”？

Question

I'm working on a website that uses masonry to laid out items in a grid. When the end user clicks a filter on the website, this is the function that gets called. It is important that I mention right off the bat that the server side code is correct. What is not correct is my jQuery code below.

<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' );
  });
}

When this function is called, the grid disappears, none of the new, filtered data appears and I receive the following error in Chrome Console for the LAST line in the function.

uncaught typeerror: undefined is not a function

What is strange, and also proof that my server side code is correct is that if I change:

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

to this:

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

It loads in all the data and it is formatted perfectly other than the entire grid being moved up 100px.

The line of code causing the error is an exact replica of MANY projects that use masonry and have it working, so I don't understand why mine is not, I don't know if it is a simple syntax error or something deeper than that.

As a workaround I tried to just destroy the masonry lay out and initialize a new one but I'm not even sure how to do that because the code to initalize masonry in the first place is actually inside my Animonscroll.js library. Here is that part of the code (which I'm not able to follow).

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

The error undefined is not a function generally happens when you have an object in Javascript that is undefined , and you put parenthesis () after it, as if you're trying to invoke it like a function.

For example:

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

Somewhere in your code (it would be much easier to see with a debugger, or if you split up your code into multiple lines), you have an object that evaluates to undefined , but you're using it as a function.

Now, to your code - it looks like you've narrowed down the problem to this line that fails:

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

and this alternate line that works:

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

Based on this, the only things you're evaluating as functions in the failed line is masonry and append - based on that information, one of these (or something they call internally) is undefined .

As another debugging tip, You can also use console.log to output information, like console.log($('.grid').masonry); , etc. If masonry is undefined , then it's likely a problem loading that script.

Hope that helps you narrow down your problem!

Answer 2

I'm not sure why you are calling masonry() before you append:

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

Try this:

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