CODEWITHSUNDEEP
javascriptjqueryhtmlajaxcss
stelarossa
stelarossa

Reputation: 59

Close button not ansering(jQuery on click event) inside popup

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

Upvotes: 0

Views: 1339

Answers (2)

Jose Tuttu
Jose Tuttu

Reputation: 428

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

Upvotes: 1

arbuthnott
arbuthnott

Reputation: 3819

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.

Upvotes: 0

Related Questions