具有相似行為的第二個元素上的JS click事件不會觸發

Question

我無法讓某些通知類型的元素顯示和隱藏。 我要完成的是在頁面開始處顯示兩個或多個彈出元素。 然后，當單擊一個元素的“ .alert-close”塊時，它會縮小並隱藏內容，僅使“ .alert-open”塊可見。 然后單擊此塊，它會重新調整大小並顯示內容。 到目前為止，一切正常。 第二個元素相同。 關閉並顯示有效。 不是棘手的部分。 當其中一個元素關閉（最小化）時，我無法注冊對第二個元素的點擊（也將其最小化）。 我想念什么？ 我在每個查詢的末尾嘗試了e.preventDefault（）和e.stopPropagation（），沒有幫助。 我需要能夠注冊任意數量的類似事件的點擊。

但是，還有一個.alert-kill塊，當第一個元素被模仿時，可以單擊它並在第二個元素上工作。

第二個問題，我該如何自動化，而不必為兩個或多個相似的元素編寫相同的js，只是ID有所不同？ （下面的代碼是我的測試代碼，顯然通過id為每個元素編寫js是不正確的，但是由於它們具有相同的類，因此我無法單獨使用這些類來檢測click事件，因為它將更改應用於所有元素，我只是現在使用兩個ID來測試具有兩個元素的功能）

編輯：刪除ID，僅使用類。 現在的代碼如下所示：

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<div class="alert-container">
    <div id="alert-offer" class="alert-popup"> 
        <a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>          
        <div class="pull-left close-alert">         
            <a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a> 
            <a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a>       
        </div>     
        <div class="row top-10 content-row">
           CONTENT 1
        </div>        
    </div>

    <div id="alert-event" class="alert-popup"> 
        <a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>          
        <div class="pull-left close-alert">         
            <a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a> 
            <a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a>       
        </div>     
        <div class="row top-10 content-row">
            CONTENT 2
        </div>        
    </div>
</div>


<script>
var state = "open" ;
$(".alert-container").on("click", ".alert-popup .alert-close", function(e){    
    e.preventDefault();
    if (state !== "open")
        return;

    var $container = $(".alert-popup");            
    var $content = $(".alert-popup .content-row");

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

$(".alert-container").on("click", ".alert-popup .alert-open", function(e){    
    var state = "close";
    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");
});

$(".alert-container").on("click", ".alert-popup .alert-kill", function(e){            
    $(".alert-popup").css("display","none");            
});
</script>

Answer 1

$(".alert-container").on("click", ".alert-popup .alert-close", function(e){           
        var state = "open" ;
        e.preventDefault();
        if (state !== "open")
            return;

        var $container = $(e.target).closest(".alert-popup");           
        var $content = $container.find(".content-row");    
        var $alert = $container.find(".alert-open");        
        $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).removeClass("hide");
    });

    $(".alert-container").on("click", ".alert-popup .alert-open", function(e){            
        var state = "close" ;
        e.preventDefault();
        if (state === "open")
            return;
        var $container = $(e.target).closest(".alert-popup");           
        var $content = $container.find(".content-row");
        var $alert = $container.find(".alert-close");
        $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).removeClass("hide");
    });

    $(".alert-container").on("click", ".alert-popup .alert-kill", function(e){  
        var $container = $(e.target).closest(".alert-popup");
        $($container).css("display","none");            
    });

這是最終的且功能全面的代碼。 萬一有人發現自己處在類似的情況下，也許它將使更容易找到正確的解決方案