I can not click div with the item class on jquery masonry - jquery-masonry

Question

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

Answer 1

I guess the .item.masonry-brick elements are added dynamically.
You cannot attach events on dynamically generated elements like this,
Use on instead.
$("#container").on("click",".item.masonry-brick",function(){
var body_m=$('body');
var blur_div=$('<div></div>');
blur_div.addClass('blurred');
body_m.prepend(blur_div);
});