title: I can not click div with the item class on jquery masonry
body: <p>I am using the Masonry. I have the fallowing code after masonry loads the page:</p>
  
  <pre><code>&lt;div id="main_container"&gt;
  &lt;div id="container" class="masonry" style="position: relative; height: 655px; width: 1128px;"&gt;
      &lt;div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;"&gt;
          &lt;img class="images" src="http://www.elektriklihafifticari.com/ca_images/small/67923429.jpg"&gt;
          &lt;p class="note"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item masonry-brick" style="position: absolute; top: 0px; left: 282px;"&gt;
          &lt;img class="images" src="http://www.elektriklihafifticari.com/ca_images/small/30446134.jpg"&gt;
          &lt;p class="note"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to add a new div to the body as i click on any of these 'item masonry-brick' classes.
  And i use the fallowing code to make this:</p>
  
  <pre><code>$(".item.masonry-brick").click(function(){
      var body_m=$('body');
      var blur_div=$('&lt;div&gt;&lt;/div&gt;');
      blur_div.attr('class','blurred');
      body_m.prepend(blur_div);
  });
  </code></pre>
  
  <p>Unfortunately it does not work. I tried many diffrent solutions but could not succeed. I realised that if i change the code as:</p>
  
  <pre><code>$("#container").click(function(){
      var body_m=$('body');
      var blur_div=$('&lt;div&gt;&lt;/div&gt;');
      blur_div.attr('class','blurred');
      body_m.prepend(blur_div);
  });
  </code></pre>
  
  <p>i got what i want as i click on the div with the <code>id=container</code>.
  Any ideas?
  Thanks.</p>
  
  <p>Edited.
  Now there is a new problem about the situation:</p>
  
  <p>the html code is:</p>
  
  <pre><code>&lt;div id="container" class="masonry" style="position: relative; height: 335px; width:    846px;"&gt;
      &lt;div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;"&gt;
          &lt;img class="images" src="http://www.dostahediye.com/ca_images/small/230352553.jpg" data-id="1000014037951491000"&gt;
          &lt;p class="note"&gt;teşekkürler&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item masonry-brick" style="position: absolute; top: 0px; left: 282px;"&gt;
          &lt;img class="images" src="http://www.dostahediye.com/ca_images/small/660575147.jpg" data-id="1000014037951491001"&gt;
          &lt;p class="note"&gt;5 kişi lütfen&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item masonry-brick" style="position: absolute; top: 0px; left: 564px;"&gt;
          &lt;img class="images" src="http://www.dostahediye.com/ca_images/small/474047220.jpg" data-id="1000014037951491002"&gt;
          &lt;p class="note"&gt;7 kişi lütfen&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When i use the code below to recognise which div.item.masonry-brick is clicked, always the first data-id '1000014037951491000' is alerted.</p>
  
  <pre><code>$("#container").on("click",".item.masonry-brick",function(){
  
      var data_id=$('img',this).data('id');
      alert(data_id);
  </code></pre>
  
  <p>Any ideas?
  Thanks in advance.</p>