自定义Java灯箱

Question

我正在尝试为网站上的图像创建自己的灯箱。 是的，我知道这里有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();
    });
});

Answer 1

代替

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

用这个：

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

您需要执行此操作，因为jQuery不会在DOM中的新项目上注册.click（）事件，而仅在调用document.ready函数时在页面上存在的项目注册。

Answer 2

将lbox_container添加到页面后，您需要为其设置点击状态-在第一次点击内移动bind事件应该起作用。

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