1

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

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

当我单击任何这些“项目砖石”类时，我想向正文添加一个新的 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);
});

当我点击 div 时，我得到了我想要的id=container。有任何想法吗？谢谢。

已编辑。现在情况出现了一个新问题：

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 时，总是会提醒第一个数据 ID '1000014037951491000'。

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

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

有任何想法吗？提前致谢。

4

1 回答 1

0

我猜这些.item.masonry-brick元素是动态添加的。

您不能像这样在动态生成的元素上附加事件，

改为使用。

$("#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);
});
于 2012-09-20T12:51:05.803 回答