Почему мой код для добавления элементов в кладку дает мне «undefined is not a function»?

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 консоли для последней строки в функции.

uncaught typeerror: undefined is not a function 

Что странно, а также доказательство того, что мой код на стороне сервера является правильным является то, что если я изменю:

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

к этому:

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

Он загружает во всех данных и он отлично отформатирован, за исключением того, что вся сетка перемещается на 100 пикселей.

Строка кода, вызывающая ошибку, является точной копией многих проектов, в которых используется кладка, и она работает, поэтому я не понимаю, почему мой нет, я не знаю, является ли это простой синтаксической ошибкой или что-то более глубокое, чем это.

В качестве обходного пути я попытался просто уничтожить кладки и инициализировать новую, но я даже не уверен, как это сделать, потому что код для инициализации кладки в первую очередь находится внутри моей библиотеки 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

Я не уверен, почему вы звоните кладку(), прежде чем добавить:

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

Попробуйте это:

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