ポップアップ内の閉じるボタンのアンサー処理（クリックイベントのjQuery）

Question

シンプルなような問題がありますが、何が起こっているのかわかりません。 onClickというポップアップがあり、メニュー内のポップアップボックスが表示されています。私はポップアップと呼ばれる私のページ上の要素を持っていて、それはpopupActiveクラスを追加してクリックして画面を満たし、load()を使用するよりも、サーバーからいくらかのコンテンツを読み込みます。これまでのところ素晴らしい作品です。その後、ユーザーがXをクリックすると、popupActiveクラスが削除され、元の状態に戻ります（これはscale(0)とscale(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"); 
    }); 

Answer 2

あなたloadメソッドは非同期です。つまり、モーダルを閉じるクリックハンドラをアタッチしようとする前に、内部HTMLの追加が完了していない可能性があります。

あなたは（.load("Ajax/about.html", function() { /* attach it here */ })のような）負荷のためのコールバックでのクリックハンドラを添付できますが、私はよりよい解決策は、一度だけでもモーダルロードする前に、最大高リスナーを添付することだと思う：

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

そのコードは、最初のページDOMが準備できたらすぐに1回実行する必要があります。