Apply jQuery on dynamically generated DOMElement

Question

I'm trying to create a masonry display with generated div blocks. The strutcture is the following :

<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>
</div

And the jQuery :

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
     */
});

Each time the page is loading, I get the error : Uncaught TypeError: container.masonry is not a function. I'm newbie in jQuery, and that's why I use a masonry template from here

I have already looked at some posts as : Event binding on dynamically created elements? But I couldn't figure out how to solve my problem. I suppose the error occurs because I'm trying to bind events to elements which aren't created yet.

You appear to be including masonry in your page twice, I'd remove the non-CDN version — Rory McCrossan, Jul 21 '16 at 08:23
The CDN version allows me to use the **jQuery('.post').container({...});** because my assets/js/masonry.js doesn't contain a definition of the container constructor. — Maxime Flament, Jul 21 '16 at 08:27
Error means at time you try to initialize masonry plugin, this plugin isn't loaded. Are you sure you include it before window is loaded? If ya, maybe you include jQuery twice — A. Wolff, Jul 21 '16 at 08:27
@YoYo Because I only need this script in this page, and the site contains something like 40-50 web-pages. — Maxime Flament, Jul 21 '16 at 08:28
read docs : http://masonry.desandro.com/#initialize-with-vanilla-javascript — , Jul 21 '16 at 08:28
@A.Wolff OKay, I'll try to look for where I could have included it once already, and I'm coming back to you :) — Maxime Flament, Jul 21 '16 at 08:29
@YoYo I tried to use this template onto a static web page, and it works perfectly. I think I'm making a mistake in a script load. — Maxime Flament, Jul 21 '16 at 08:33
I tried loading the masonry.pkgd.min.js directly into my jQuery script, removing it from the HTML page : $.getScript("http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js", function(data, textStatus, jqxhr) { console.log( data ); // Data returned console.log( textStatus ); // Success console.log( jqxhr.status ); // 200 console.log( "Load was performed." ); }); The console logs show : "undifined" "success" "200" "Load was performed." Is the undifined _var data_ traducing that I load the script, but I got nothing from it ? — Maxime Flament, Jul 21 '16 at 08:44

Ivan Karaman · Accepted Answer · 2016-07-21T08:57:17.450

works for me... id must be unique in your markup 2 tags have same id, maybe problem with .post because empty... link to masonry.js is bad assets/js/masonry.js

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<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="panel">
  <div id="grid">
    <div id="posts">
           
      <div class="post"> 
        <p> The .post are generated dynamically</p>
        <p> Block content generated dynamically</p>
      </div>
   <div class="post"> 
        <p> The .post are generated dynamically </p>
        <p> Block content generated dynamically </p>
      </div>
    </div>
  </div>
</div>

Thanks, I was failing at sorting the import.. jQuery needs to be loaded first, and it was loaded twice.. So it generated errors — Maxime Flament, Jul 21 '16 at 09:06

score 0 · Answer 2 · answered Jul 21 '16 at 08:57

I solved the problem by removing the

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

line, because I was importing it already from another included file... My bad !

Thanks for your help guys, and have a nice day !

Apply jQuery on dynamically generated DOMElement

2 Answers2