0

私のWebページでは、編集フォームを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();

ドキュメントには既に 2 つ<div class="modal-popup" style="display:none">追加されています。.remove 呼び出しの後、1 つが残ります。(何もないはずです =) .dialog が呼び出された後、6 つまたは 7 つのモーダル ポップアップ div があり、jQuery UI div 内に実際に表示されるのは 1 つだけです。

私が説明していることがばかげているように聞こえる場合は、お知らせください。問題の原因は何ですか?

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 に答える