0

Web サイトの画像用に独自のライトボックスを作成しようとしています。はい、無料の lightbox2 があることは知っていますが、このチャレンジを楽しんでいます。ライトボックス自体のクリック イベントに問題があります。ライトボックスを削除しようとしていますが、クリック イベントが登録されていないようで、Google Chrome の開発ツールにエラーはありません。これは私のコードです:

$(document).ready(function(){
    $(".lbox").click(function(){
        $("body").append("<DIV class='lbox_container'><DIV class='img_container'><IMG src='" + this.src + "'/></DIV></DIV>");
        $(".lbox_container").width($(document).width()).height($(document).height());
    });
    $(".lbox_container").click(function(){
        $(".lbox_container").remove();
    });
});
4

2 に答える 2

2

それ以外の

$(".lbox_container").click(function(){
    $(".lbox_container").remove();
});

これを使って：

$("body").on('click','div.lbox_container', function(){
    $(".lbox_container").remove();
});

jQueryはDOMの新しいアイテムに.click（）イベントを登録せず、document.ready関数が呼び出されたときにページに存在するアイテムのみを登録するため、これを行う必要があります。

于 2012-06-20T16:20:19.983 に答える
2

lbox_containerがページに追加された後、クリック状態を設定する必要があります。最初のクリック内でバインドイベントを移動すると機能するはずです。

$(document).ready(function(){
    $(".lbox").click(function(){
        $("body").append("<DIV class='lbox_container'><DIV class='img_container'><IMG src='" + this.src + "'/></DIV></DIV>");
        $(".lbox_container").width($(document).width()).height($(document).height());

        $(".lbox_container").click(function(){
             $(".lbox_container").remove();
        });
    });
});
于 2012-06-20T16:21:11.937 に答える