0

我正在尝试为我的网站上的图像创建自己的灯箱。是的,我知道有 lightbox2,它是免费的,但我喜欢挑战。我在灯箱本身上的点击事件有问题,我试图让它删除灯箱,但点击事件似乎没有注册,我在谷歌浏览器的开发工具中没有错误。这是我的代码:

$(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 回答