JQuery append - 删除后的多个实例答案

【问题标题】：JQuery append - multiple instances after removalJQuery append - 删除后的多个实例
【发布时间】：2013-08-13 10:42:09
【问题描述】：

我正在尝试使用 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();
    });

有人能解释一下为什么会这样吗？也欢迎任何关于我在这里尝试的反馈。

【问题讨论】：

HTML id 必须是唯一的...
@user980988 为什么要添加和删除模式而不是隐藏它？除非需要几个模态框，否则这不是处理模态框的最佳方式。

标签： jquery modal-dialog

【解决方案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);
});

【讨论】：

【解决方案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);
    });

【讨论】：

【解决方案3】：

点击后，您应该删除一些模态框，这些框是当时显示在页面上的。当然，如果有的话。

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

或者只是简短的形式：

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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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();

});

【讨论】：