Question

我有一个似乎很简单的问题，但我无法找到正在发生的事情。我有一个带有onClick的弹出框，显示内部菜单弹出框。我的页面上有一个名为popup的元素，它通过添加popupActive类而不是使用load()来增加填充屏幕，然后从服务器加载一些内容。到目前为止一切都很好。然后，当用户点击 X 时，它应该删除popupActive类并缩小回原始状态（这是通过scale(0)和scale(1)完成的。但是当我点击 X 没有任何事情发生时，控制台没有显示任何错误，我尝试console.log("Hello!")查看它是否到达那里（脚本），但它没有显示任何内容

我的代码如下。

HTML

<section id="popup" class="popup"><button class="about-close">X</button</section>

CSS

.popup {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    min-height: 100vh;
    border-radius: 50px;
    z-index: 0;
    transform: scale(0);
    transition: 1s linear all;
}
.popupActive {
    transform: scale(1);
    z-index: 99;
    transition: 1s linear all;
}
.about-close {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: transparent;
    display: block;
    border-radius: 50%;
    border: 1px solid #f74d4e;
    color: #f74d4e;
    font-size: 30px;
    cursor: pointer;
    z-index: 999;
}

的JavaScript

$(".li-a").on('click',function(event) {
    event.preventDefault();
    $("#popup").addClass("popupActive").load("Ajax/about.html");
});
$(".about-close").on('click',function(event) {
    event.preventDefault();
    console.log("Hello!");
    $(".about-container").remove();
    $("#popup").removeClass("popupActive");
});

Answer 1

   <section id="popup" class="popup"><button class="about-close">X</button>
    <div class="popup-content"></div>
   </section>

脚本：

$(".li-a").on('click',function(event) {
        event.preventDefault();

        $("#popup").addClass("popupActive");
         $("#popup .popup-content").load("Ajax/about.html");
    });
    $(".about-close").on('click',function(event) {
        event.preventDefault();
        console.log("Hello!");
        $("#popup .popup-content").remove();
        $("#popup").removeClass("popupActive");
    });

Answer 2

您的load方法是异步的 - 这意味着在尝试附加关闭模式的点击处理程序之前，可能无法完成添加内部html。

您可以在回调中附加点击处理程序以加载（例如.load("Ajax/about.html", function() { /* attach it here */ })），但我认为更好的解决方案是将侦听器连接到更高的位置，甚至在模态加载之前一次：

$("#popup").on('click', '.about-close',function(event) {
    event.preventDefault();
    console.log("Hello!");
    $(".about-container").remove();
    $("#popup").removeClass("popupActive");
});

当初始页面DOM准备就绪时，该代码只需运行一次。

弹出窗口内的关闭按钮不是ansering（点击事件上的jQuery）

2 个答案: