jquery - JQuery append - 删除后的多个实例

Question

我正在尝试使用 jquery 创建一个模式窗口，并且似乎做得相当好。唯一的问题是当我第二次单击联系人按钮时，它似乎附加了两个模态框。一个在另一个之上。如果再次点击，第三个......

这是代码：

$('#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();

Answer 4

由于#send click #modal是动态创建的，所以没有删除，所以尝试使用on()

$(document).on('click','#send',function(e){// jquery event delegation
    $('#modal').remove();// it will remove the dynamically created modal box
});

或者，您可以使用以下代码，

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

Answer 5

为什么

每次#contact单击元素时，您的代码都会附加一个新的 div。因此，每次单击按钮时，浏览器都会呈现一个新的模式窗口。

解决方案

只创建一次模态 div 并将其作为变量重用。您可以使用该.appendTo()方法执行此操作。

Here's a demo

var $modal = false;

$('#contact').on( 'click', function(e){

    e.preventDefault();

    if ( ! $modal ){

      $modal = $('<div id="modal"></div>').appendTo('body');

    }

    $modal.load('/forms/contact-form.html').hide().fadeIn(1000);

});

$('#send').click(function(e){

    if ( $modal )
      $modal.hide();

});