0

在我的网页上，我正在使用 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 个 modal-popup div 和 jQuery UI div 中唯一实际显示的一个。

如果我所描述的听起来很荒谬——请告诉我。问题的根源可能是什么？

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

4

2 回答 2

1

尝试构造函数以考虑变量声明提升并在添加之前进行删除（如下所示）：

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);
于 2012-06-15T20:27:12.153 回答
0

试试这个：

.done(function (content) {
    $('.modal-popup').each(function(){
        $(this).remove();
    });
于 2012-06-15T17:38:31.147 回答