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