Javascript 当应该只有一个jQuery对话框时，正在创建多个jQuery对话框

在我的网页上，我正在使用jQuery.get异步加载编辑表单，并将其显示在jQuery对话框中。由于某些原因，我正在应用的div的多个实例.dialog被追加到document.body。这是我的加载代码：

function openEditProjectDialog(event) {
    var projectNameToEdit = $(event.currentTarget).closest('.project-item').find('.project-name').text();
    var url = $("#EditProjectActionUrl").val();
    var dataString = 'name=' + projectNameToEdit + '&__RequestVerificationToken=' + encodeURIComponent($("input[name=__RequestVerificationToken]").val());

    $.get(url, dataString)
            .done(function (content) {
                $('.modal-popup').remove();
                var popupDiv = $('<div class="modal-popup"><div id="edit-project-block">' + content + '</div></div>').hide();
                var whatWeDialogOn = popupDiv.appendTo(document.body);
                whatWeDialogOn.dialog({
                    title: 'Editing project <b>' + projectNameToEdit + '</b>',
                    modal: true,
                    resizable: false,
                    draggable: true,
                    width: 725,
                    close: function(event, ui) {
                        $(this).dialog('destroy').remove();
                        $('.modal-popup').remove();
                    }
                });
                $("#edit-project-block #bottomAreaHtml").attr("id", "bottomAreaHtmlToEdit");
                CKEDITOR.replace('bottomAreaHtmlToEdit');
                $('.chzn-select').chosen();
                $("#edit-project-block #submit-project").on("click", submitUpdatedProject);

            });
}

$('#projects').on("click", '.edit-project', openEditProjectDialog);

文档中已经附加了两个。之后。删除呼叫，还有一个。我知道应该没有=在调用.dialog之后，有6个或7个模式弹出div，并且在jQuery UI div中只有一个实际显示

如果我所描述的听起来不可思议-让我知道。问题的根源可能是什么

p.S.var popupDiv=$'。。。是将具有此名称的div添加到DOM的唯一位置

试试这个：

.done(function (content) {
    $('.modal-popup').each(function(){
        $(this).remove();
    });

---

尝试对函数进行结构化，以便在添加之前进行删除，如：

function openEditProjectDialog(event) {
    var projectNameToEdit = $(event.currentTarget).closest('.project-item').find('.project-name').text();
    var url = $("#EditProjectActionUrl").val();
    var dataString = 'name=' + projectNameToEdit + '&__RequestVerificationToken=' + encodeURIComponent($("input[name=__RequestVerificationToken]").val());
    $.get(url, dataString).done(function (content) {
        var div = $('<div />'),
            editDiv = null,
            popupDiv = null,
            whatWeDialogOn = null;
        //Create the Editing div
        editDiv = div.clone().attr('id', 'edit-project-block').html(content);
        editDiv.find('#bottomAreaHtml').attr("id", "bottomAreaHtmlToEdit");
        editDiv.find('#submit-project').on("click", submitUpdatedProject);
        //Create the containing div
        popupDiv = div.clone().addClass('modal-popup').append(editDiv).hide();
        //Create the dialog
        whatWeDialogOn = popupDiv.dialog({
            "title": "Editing project <b>" + projectNameToEdit + "</b>",
            "modal": true,
            "resizable": false,
            "draggable": true,
            "width": 725,
            "close": function (event, ui) {
                //$(this).dialog('destroy').remove();
                $('.modal-popup').dialog('destroy').remove();
            }
        });
        //No need since none is there if everything closes right from before
        //$('.modal-popup').dialog('destroy').remove();
        //.dialog call does appending from within constructor. No need to append anything
        //$('body').append(whatWeDialogOn); 

        CKEDITOR.replace('bottomAreaHtmlToEdit');
        $('.chzn-select').chosen();
    });
}
$('#projects').on("click", '.edit-project', openEditProjectDialog);

---

首先，谢谢你的辅导，我目前还不是一个优秀的js作家，而且我自己也没有意识到这一点。这解决了重复div的问题。我已经更新了你对一个工作的ajax get的回答，因为在你的版本中。dialog已经在对一个主体进行附加，并且$'.modal popup'.dialog'destroy'.remove；正在删除新创建的对话框。谢谢

function openEditProjectDialog(event) {
    var projectNameToEdit = $(event.currentTarget).closest('.project-item').find('.project-name').text();
    var url = $("#EditProjectActionUrl").val();
    var dataString = 'name=' + projectNameToEdit + '&__RequestVerificationToken=' + encodeURIComponent($("input[name=__RequestVerificationToken]").val());
    $.get(url, dataString).done(function (content) {
        var div = $('<div />'),
            editDiv = null,
            popupDiv = null,
            whatWeDialogOn = null;
        //Create the Editing div
        editDiv = div.clone().attr('id', 'edit-project-block').html(content);
        editDiv.find('#bottomAreaHtml').attr("id", "bottomAreaHtmlToEdit");
        editDiv.find('#submit-project').on("click", submitUpdatedProject);
        //Create the containing div
        popupDiv = div.clone().addClass('modal-popup').append(editDiv).hide();
        //Create the dialog
        whatWeDialogOn = popupDiv.dialog({
            "title": "Editing project <b>" + projectNameToEdit + "</b>",
            "modal": true,
            "resizable": false,
            "draggable": true,
            "width": 725,
            "close": function (event, ui) {
                //$(this).dialog('destroy').remove();
                $('.modal-popup').dialog('destroy').remove();
            }
        });
        //No need since none is there if everything closes right from before
        //$('.modal-popup').dialog('destroy').remove();
        //.dialog call does appending from within constructor. No need to append anything
        //$('body').append(whatWeDialogOn); 

        CKEDITOR.replace('bottomAreaHtmlToEdit');
        $('.chzn-select').chosen();
    });
}
$('#projects').on("click", '.edit-project', openEditProjectDialog);