jQuery委托点击事件未触发答案

【问题标题】：jQuery delegated click event not firingjQuery委托点击事件未触发
【发布时间】：2014-02-05 13:47:46
【问题描述】：

出于开发的目的，我正在玩耍并制作自己的灯箱效果。我已经用它来加载覆盖 div，内容 div 在中间，并使用右上角的标准十字图标来允许用户关闭。

问题是，当我点击十字架时，什么也没有发生。我有：

$('.cross').click(function() { 
    $('.popup-overlay').remove();
});

经过一番谷歌搜索，看起来可能是由于内容是动态加载的，因此我需要优化 javascript 委托。我尝试使用：

$('.popup-overlay').on('click', '.cross', function() {
    alert('click');
});

和：

$('a[rel="popup"]').on('click', '.popup-overlay', function() {
    alert('click');
});

但它没有开火。这是动态加载的html。

<div class="popup-overlay">
    <div class="half-height">
        <div class="popup-box"> 
            <img src="assets/img/cross.png" alt="close" class="cross">
        </div>
    </div>
</div>

所以.....

谁能告诉我怎么做，这样当我点击 .cross 时，.popup-overlay html 会从正文中删除？

提前感谢您的帮助。

【问题讨论】：

应该以$('.popup-overlay').remove();开头。注意点。
$(document).on('click', '.cross', function() { alert('click'); });会弹出警报吗？
抱歉，这里打错了。但在代码中是否存在，已修复
弹出窗口本身是否正在重新加载？你也应该委派那个:)
@karl-andre-gagnon 谢谢，那行得通。想要将其发布为答案，以便我奖励您积分？

标签： jquery lightbox delegation

【解决方案1】：

委托事件的全部意义在于它们绑定了一个不动态添加的元素。您的整个弹出窗口是动态添加到 DOM 中的，因此您无法将任何事件绑定到它（委托或其他方式） - 在代码执行时它永远不会存在。

在最坏的情况下绑定到文档：

$(document).on('click', '.popup-overlay .cross', function(e) {
    $(this).closest('.popup-overlay').remove();
});

理想情况下，您应该选择一个 static （在页面加载/代码执行时存在，并且在文档的生命周期内永远不会被删除）元素在 DOM 中尽可能接近动态添加的元素元素（你的 .popup-overlay 元素）。

【讨论】：