javascript - 弹出窗口内的关闭按钮不响应(点击事件上的 jQuery)

Question

我有一个看似简单的问题，但我找不到发生了什么事。我有一个带有 onClick 的弹出窗口，里面显示了菜单弹出框。我的页面上有一个名为 popup 的元素，通过添加 popupActive 类而不是使用 load()，它会在点击时填充屏幕，然后加载一些内容从服务器。到目前为止一切都很好。然后，当用户点击 X 时，它应该删除 popupActive 类并收缩回原始状态(这是通过 scale(0) 和规模(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");
    });