弹出窗口内关闭按钮不解析（jQuery on click event）

Question

I have a problem that seems to be simple but I can't find what's going on. I have a popup with onClick , inside menu popup box is showing. I have element on my page that is called popup, and it grows to fill the screen on click by adding popupActive class and than using load() , it then loads some content from the server. It all works great so far. Then, whan a user clicks on X it should remove popupActive class and shrink back to original state (this is accomplished with scale(0) and scale(1) ). But instead when I click X nothing happenes, console doesn't show any errors, and I tried console.log("Hello!") to see if it ever got there (script), but it doesn't show anything.

My code is below.

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>

script:

$(".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

Your load method is asynchronous - that means it may not be finished adding the internal html before you try to attach the click-handler that closes the modal.

You could attach the click handler in the callback for load (like .load("Ajax/about.html", function() { /* attach it here */ }) ), but I think a better solution would be to attach the listener higher up, just once even before the modal loads:

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

That code just needs to run once when the initial page DOM is ready.