I'm attempting to craft a masonry display using dynamically generated div blocks. Here is the structure I am working with:
<div id="grid" class="panel">
<div id="grid">
<div id="posts">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="assets/js/masonry.js"></script>
<div class="post"> <!-- The .post are generated dynamically -->
<!-- Block content generated dynamically -->
</div>
<div class="post"> <!-- The .post are generated dynamically -->
<!-- Block content generated dynamically -->
</div>
</div>
</div>
</divAnd here is the jQuery code being used:
jQuery(window).load(function () {
// Takes the gutter width from the bottom margin of .post
var gutter = parseInt(jQuery('.post').css('marginBottom'));
var container = jQuery('#posts');
// Creates an instance of Masonry on #posts
container.masonry({
gutter: gutter,
itemSelector: '.post',
columnWidth: '.post'
});
/*
* some code
*/
});Whenever the page loads, I encounter the following error: Uncaught TypeError: container.masonry is not a function. I am new to jQuery and have been utilizing a masonry template from here.
I have researched similar issues such as this post on dynamic element binding: Event binding on dynamically created elements? However, I have been unable to solve my problem, assuming it may be due to trying to bind events to elements that do not exist yet.