JS click event on second element with similar behavior doesn't trigger

155
September 13, 2017, at 4:18 PM

I'm having trouble getting some notification type elements to show and hide accordingly. what i want to acomplish is have two or more popup elements show on page start. then when clicking one element's ".alert-close" block, it shrinks and hides the content, leaving just the ".alert-open" block visible. then on clicking this block, it sizes back up and shows the content. so far so good, this works. same for the second element. closing and showing it works. not for the tricky part. When one of the elements is closed (minimized), i can't register the click on the second element (to minimize this one also). What am I missing? i tried e.preventDefault() and e.stopPropagation() at the end of each query, didn't help. I need to be able to register the click on any number of similar events.

However, there is also the .alert-kill block, this one can be clicked and works on a the second element when the first one is mimized.

Second question, how could i automate this without needing to write the same js for two or more similar elements, only different by id? (the code below is my test code, obviously writing js for each element by id is not correct, but since they have the same classes i cannot use these classes alone to detect the click event as it applies the changes to all elements, i just used two ids now to test the functionality with two elements)

EDIT: removed ids and used just classes. the code now looks like this:

var state = "open";
$(this).on("click", ".alert-popup .alert-close", function(e){
    e.preventDefault();
    if (state !== "open")
        return;
    var $container = $(".alert-popup");            
    var $content = $(".alert-popup .content-row");
    $width = $(".content-row", $container).width();
    $container.css({
        "right": "-270px",
        "height": "40px",
        "transition": "all 1s ease 0s"
    });
    $content.css({
            "transform":"scale(.5)",
            "transform-origin":"0 0",
            "transition": "all 1s ease 0s"
        });
        state = "close";
        $(e.currentTarget).addClass("hide");            
        $(".alert-popup .alert-open").removeClass("hide");
    });
    $(this).on("click", ".alert-popup .alert-open", function(e){
        e.preventDefault();
        if (state === "open")
            return;
        var $container = $(".alert-popup");
        var $content = $(".alert-popup .content-row");
        $container.css({
            "right": "0px",
            "height": "80px",
            "transition": "all 1s ease 0s"
        });
        $content.css({
            "transform":"scale(1)",
            "transition": "all 1s ease 0s"
        });
        state = "open";
        $(e.currentTarget).addClass("hide");
        $(".alert-popup .alert-close").removeClass("hide");
    });
     $(this).on("click", ".alert-popup .alert-kill", function(e){
        $(".alert-popup").css("display","none");            
    });
READ ALSO
Isotope.js tiles overlapping just on mobile browsers

Isotope.js tiles overlapping just on mobile browsers

I´m having some problems with Isotopejs from Metafizzy

183
Better way to define custom list type in Unicode Number in CSS

Better way to define custom list type in Unicode Number in CSS

I would want to make a custom list type of Khmer Unicode Number ១ ២ ៣orderly

170
Chrome not caching css file. The caching works for .js/.png files.

Chrome not caching css file. The caching works for .js/.png files.

I am observing that CSS file is not getting cached on Chrome browserMy application is built by Angular-CLI and all the required cache-control headers and Expires header set to 5 minutes:

198