javascript - 灯箱内部的跨度不会触发功能

Question

我已经添加了一个CodePen Demo

我试图在单击关闭按钮时关闭灯箱。目前，灯箱只会在后台“关闭”或触发关闭功能。

不确定我做错了什么。

CodePen Demo

到目前为止，我已经尝试了这些不会触发关闭函数的选择器:

$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')

Answer 1

您应该使用 $(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); }); 因为当您运行 $('.lightbot-item .close-button').click(function(){ closeLightbox(); }) 时 div lightbox-item 是空的; 在代码的末尾。

您还可以在函数openLightbox 中追加内容后绑定(bind)点击事件。看起来像这样

$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });

我为你的 pen 创建了一个分支使用第一种解决方案。