Question

我正在使用砌体。在砌筑加载页面后，我有以下代码：

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

当我点击这些'item masonry-brick'类中的任何一个时，我想在主体上添加一个新的div。我使用以下代码来实现：

$(".item.masonry-brick").click(function(){
    var body_m=$('body');
    var blur_div=$('<div></div>');
    blur_div.attr('class','blurred');
    body_m.prepend(blur_div);
});

不幸的是它不起作用。我尝试了许多不同的解决方案，但无法成功。我意识到，如果我将代码更改为：

$("#container").click(function(){
    var body_m=$('body');
    var blur_div=$('<div></div>');
    blur_div.attr('class','blurred');
    body_m.prepend(blur_div);
});

我得到了我想要的东西，因为我点击了id=container的div。有任何想法吗？感谢。

编辑。现在有一个关于这种情况的新问题：

html代码是：

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

当我使用下面的代码识别单击了哪个div.item.masonry-brick时，始终会警告第一个数据标识“1000014037951491000”。

$("#container").on("click",".item.masonry-brick",function(){

    var data_id=$('img',this).data('id');
    alert(data_id);

有什么想法吗？提前谢谢。

Answer 1

我想.item.masonry-brick元素是动态添加的。

您无法在动态生成的元素上附加事件，例如

改为使用on。

$("#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);
});

我无法在jquery masonry上使用item类单击div

1 个答案: