jquery - JQuery の追加 - 削除後の複数のインスタンス

Question

jquery でモーダル ウィンドウを作成しようとしていますが、かなりうまくいったようです。唯一の問題は、連絡先ボタンを 2 回目にクリックしたときに、2 つのモーダル ボックスが追加されたように見えることです。もう一方の上に 1 つ。もう一度クリックすると 3 分の 1 が....

コードは次のとおりです。

$('#contact').on( 'click', function(e){
        e.preventDefault();
        $('body').append('<div id="modal"></div>');
        $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
    });

    $('#send').click(function(e){
        $('#modal').remove();
    });

誰かがなぜこれが起こっているのか説明できますか? また、私がここで試みていることについてのフィードバックも歓迎します。

Answer 1

最善の方法は、新しいモーダル div を作成するときにモーダル div を削除することです。

$('#contact').on('click', function () {
    $('#modal').remove(); //remove modal here
    $('body').append('<div id="modal"></div>');
    $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
});

Answer 2

追加する前に、削除してみてください。

$('#contact').on( 'click', function(e){
        e.preventDefault();
        $('#modal').remove();
        $('body').append('<div id="modal"></div>');
        $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
    });

Answer 3

クリック後、その時点でページに表示されているいくつかのモーダル ボックスを削除する必要があります。確かに、いくつかが存在する場合。

$('body').find("#modal").remove();

または単に短い形式:

$("#modal").remove();