单击未启动处理功能

Question

JS提琴:http://jsfiddle.net/d9nat0gk/20/

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();
});
});

Block .layer成功地显示在屏幕上，但是由于某种原因，当我点击。layer时，没有调用。layer点击处理。

有什么问题?怎么解呢?

任何帮助将非常感激!

Answer 1

方法$(".layer").on的求值是在调用它时对元素执行的，所以如果您尝试在该行之前执行console.log($(".layer"))，您将看到在该点没有具有.layer的元素。

您应该在脚本开头或HTML中创建并隐藏<div.layer>，否则您可以在创建元素之后(在$("body").before("<div class="layer">Hey!</div>");之后)移动$(".layer").on(...)代码段