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

Question

我添加了CodePen演示

单击关闭按钮时，我试图关闭灯箱。目前，灯箱只会关闭＆＃34;或仅在背景上触发关闭功能。

不确定我做错了什么。

CodePen Demo

到目前为止，我已经尝试过这些不会触发关闭功能的选择器：

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

Answer 1

您应该使用$(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); });绑定文档上的点击事件，因为当您在代码末尾运行div时，$('.lightbot-item .close-button').click(function(){ closeLightbox(); });灯箱项目为空。

您还可以在函数openLightbox中追加内容后绑定click事件。它看起来像这样

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

我使用第一个解决方案创建了pen的分叉。