動的に生成されたDOMElementにjQueryを適用します

Question

生成されたdivブロックを使用して石積みディスプレイを作成しようとしています。

<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> 
 
\t <div class="post"> <!-- The .post are generated dynamically --> 
 
     <!-- Block content generated dynamically --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div

とjQuery： strutctureは以下の通りです

jQuery(window).load(function() { 
 

 

 

 
\t // Takes the gutter width from the bottom margin of .post 
 

 
\t var gutter = parseInt(jQuery('.post').css('marginBottom')); 
 
\t var container = jQuery('#posts'); 
 

 

 

 
\t // Creates an instance of Masonry on #posts 
 

 
\t container.masonry({ 
 
\t \t gutter: gutter, 
 
\t \t itemSelector: '.post', 
 
\t \t columnWidth: '.post' 
 
\t }); 
 
    /* 
 
    * some code 
 
    */ 
 
});

ページがロードされるたびに、私はエラーを取得する：捕捉されないTypeError：container.masonr yは関数ではありません。 私はjQueryのでは初心者だ、と私はhere

から石工テンプレートを使用する理由です私はすでにとして、いくつかの記事を見てきました：Event binding on dynamically created elements? しかし、私は私の問題を解決する方法を見つけ出すことができませんでした。私はまだ作成されていない要素にイベントをバインドしようとしているので、エラーが発生したと考えます。私にとって

Answer 1

作品は... idは2個のタグが同じID、空のため.postと多分問題を抱えているあなたのマークアップ内で一意でなければなりません... masonry.jsへのリンクは悪いですassets/js/masonry.js

jQuery(window).load(function() { 
 

 

 

 
\t // Takes the gutter width from the bottom margin of .post 
 

 
\t var gutter = parseInt(jQuery('.post').css('marginBottom')); 
 
\t var container = jQuery('#posts'); 
 

 

 

 
\t // Creates an instance of Masonry on #posts 
 

 
\t container.masonry({ 
 
\t \t gutter: gutter, 
 
\t \t itemSelector: '.post', 
 
\t \t columnWidth: '.post' 
 
\t }); 
 
});

<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> 
 
\t <div class="post"> 
 
     <p> The .post are generated dynamically </p> 
 
     <p> Block content generated dynamically </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私は

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

を除去することによって、問題を解決しました

私はだったので、すでに他のインクルードファイルからインポートしています ...私の悪い！

あなたのお手伝いをしていただきありがとうございます。