动态生成的.layer元素点击事件未触发问题排查及解决方法咨询

哥们，你的问题出在动态元素的事件绑定时机上！

你现在的.layer元素是点击swiper-slide之后才动态添加到页面里的，但你一开始写的$(" .layer").on("click", function() { ... })是在页面加载完成就执行了——这时候.layer还根本不存在呢，所以这个事件绑定相当于“绑定了个寂寞”，自然点击的时候没反应。

解决这个问题的核心思路是用事件委托：把事件绑定到一个已经存在的父元素（比如body，或者其他页面加载时就有的容器）上，利用DOM的事件冒泡机制，当点击动态创建的.layer时，事件会冒泡到父元素，父元素就能捕获到这个事件并执行对应的处理函数。

修改后的代码如下：

$(function() {
    console.log("hello");
    $("#album_images_slider").click(function(e) {
        console.log("hello, mate!");
        console.log(e.target.className);
        if (e.target.classList.contains("swiper-slide")) {
            console.log("hello!");
            $("body *").hide();
            $("body").before(`<div class="layer">Hey!</div>`);
        }
    });
    // 改用事件委托，绑定到静态存在的body元素上
    $("body").on("click", ".layer", function() {
        console.log("Hi");
        $(this).remove(); // 用$(this)精准移除当前被点击的layer，更严谨
    });
});

另外提个小建议：原来的$(" .layer").remove()改成$(this).remove()会更好，万一以后页面里有多个.layer元素，只会移除你点击的那个，不会误删其他的。

内容的提问来源于stack exchange，提问作者user15071395