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>

これらの「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);
});

の 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要素は動的に追加されると思います。

このように動的に生成された要素にイベントを添付することはできません。

代わりに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);
});
于 2012-09-20T12:51:05.803 に答える