Question

我正在尝试在我的网站上为图像创建自己的灯箱。是的，我知道有lightbox2它是免费的，但我喜欢挑战。我在灯箱本身遇到点击事件的问题，我试图让它删除灯箱，但点击事件似乎没有注册，我在谷歌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添加到页面后，您需要设置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();
        });
    });
});

自定义Javascript灯箱

2 个答案: