Question

出于开发的目的，我正在玩并制作自己的灯箱效果。我已经让它加载了叠加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会从正文中删除吗？

提前感谢您的帮助。

Answer 1

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

最坏的情况是绑定到文档：

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

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

jQuery委托的click事件没有触发

1 个答案: