"Bad Masonry element: [object Object]"

Question

Trying to incorporate the latest version of Masonry, I'm clueless as to what this error means. In the console, I get this message:

Bad masonry element: [object Object] plugins.js:16
y plugins.js:16
n plugins.js:16
(anonymous function) script.js:24
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q

My script -

var $container = $('#container');

$container.imagesLoaded( function(){
    var msnry = new Masonry( $container, {
        columnWidth: 320,
        itemSelector: '.item'
    });
});

I've made sure to include the imagesLoaded plugin, the same error is displayed even if I rule this out. It seems to be referring to my plugins.js file where I've stored the code for Masonry, but I've not modified anything.

Answer 1

You are passing jQuery object ($container) to the Masonry constructor which doesn't expect it. You can change it to $container[0] to get the DOM element from jQuery object:

$container.imagesLoaded( function(){
    var msnry = new Masonry( $container[0], {
        columnWidth: 320,
        itemSelector: '.item'
    });
});

or use jQuery initialization:

$container.imagesLoaded( function(){
        $container.masonry({
            columnWidth: 320,
            itemSelector: '.item'
        });
    });