Question

在我的网页上，我正在使用jQuery.get异步加载编辑表单并在jQuery对话框中显示它。出于某种原因，我正在使用.dialog的div的多个实例被附加到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);

此时：

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

已将两个<div class="modal-popup" style="display:none">附加到文档中。在.remove之后，还剩下一个。（我知道应该没有=）在调用.dialog之后，有6或7个模态弹出div，并且实际显示的是jQuery UI div中唯一的一个。

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

P.S。 var popupDiv = $('<div class="modal-popup">...是将具有此类名称的div添加到DOM的唯一位置。

Answer 1

尝试将该功能结构化以考虑variable declaration hoisting并在添加之前进行删除（如此）：

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);

Answer 2

请改为尝试：

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

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

2 个答案: