Javascript 点击处理功能未启动

JS小提琴：

let album_images_slider=new Swiper（“#album_images_slider”{
方向：“水平”，
幻灯片视图：1，
循环：对，
allowTouchMove:false，
速度:600,，
自动播放：{
延误：3000
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”
}
});
$（函数（）{
console.log（“你好”）；
$（“#相册(图像)滑块”）。单击（函数（e）{
log（“你好，伙计！”）；
log（e.target.className）；
if（如target.classList.contains（“swiper幻灯片”））{
log（“你好！”）；
$（“body*”）.hide（）；
$（“body”）。之前（`Hey！`）；
}
});
$（“.layer”）。在（“单击”，函数（）{
控制台日志（“Hi”）；
$（“.layer”）.remove（）；
});
});

Block.layer成功显示在屏幕上，但由于某些原因，当我单击.layer时，不会调用.layer单击处理。

有什么问题？我该如何解决这个问题呢？

---

任何帮助都将不胜感激

方法

$（“.layer”）.on的求值在调用它时对元素执行，因此如果您尝试在该行前面的
控制台.log（$（“.layer”）
，您将看到此时没有包含
.layer
的元素

您应该在脚本开头或HTML中创建并隐藏
，否则您可以移动
$（.layer”）。在创建元素后（…）
段代码上（在
$（.body）之前（“嘿！”）；
）
可以很好地处理
$（文档）。在（'click'，'.layer'，函数（）{..
问题的解释是正确的。但最实际的解决方案是事件委派
let album_images_slider = new Swiper("#album_images_slider", {
    direction: "horizontal",
    slidesPerView: 1,
    loop: true,
    allowTouchMove: false,
    speed: 600,
    autoplay: {
        delay: 3000
    },

    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    }
});

$(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>`);
        }
        
    });
    
    $(".layer").on("click", function() {
        console.log("Hi");
        $(".layer").remove();
    });
});