基于相同 <div> 的两个不同的 jQuery UI 对话框答案

【问题标题】：Two different jQuery UI dialogs based on the same <div>基于相同 <div> 的两个不同的 jQuery UI 对话框
【发布时间】：2011-11-01 16:31:57
【问题描述】：

嗯，我有一个表单，当用户点击这个或那个元素时，它会在模式对话框中弹出。根据所击中的内容，对话行为应略有改变。例如，默认情况下，对话框应同时具有 [OK] 和 [Cancel] 按钮，以及右上角的 [X] 关闭按钮。但有时我希望隐藏 [X] 和 [Cancel] 按钮并禁用转义。表单 ID 和字段集保持不变。

我尝试了以下方法：

    var dlg1 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    var dlg2 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    $("#button1").click( function() {
        dlg1
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

现在，问题是，如果我点击 button1 以显示 dlg1，然后关闭它，然后点击 button2，选项不会改变。显示的对话框仍然有来自 dlg1 的选项。反之亦然，如果首先显示 dlg2，则 button1 处理程序不会覆盖对话框选项。我哪里错了？提前非常感谢。

由于不允许在 8 小时之前回答自己的问题，我正在编辑问题以提供答案：

好吧，我想通了。我最终做了以下事情：

var dlg1 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    })
    }

    var dlg2 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });
    }

    $("#button1").click( function() {
        dlg1()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

就是这样！感谢大家的帮助。

【问题讨论】：

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

（根据记忆）

您正在使用相同的对象来调用对话框。第一次调用 dialog open 时，它会抓取 div，使用参数实例化对话框并将其放在文档的底部（就在 body 关闭标记上方）。

下次您调用 dialog open 时，它会知道具有该 id 的 div 先前已实例化，并且只需将显示设置为阻止...

或类似的东西。简单地说，一旦一个 div 被加载为一个对话框，它就不会随着每个 dialog.open 重新加载，而只是使其可见。

【讨论】：

这为我指明了正确的方向，谢谢。问题是 - “我哪里错了？”，所以这是一个答案。

【解决方案2】：

当您关闭对话框时，请尝试使用 destroy 方法。

http://jqueryui.com/demos/dialog/#method-destroy

【讨论】：

是的，我之前尝试过，但对话框在被销毁后根本不显示。

【解决方案3】：

在每次调用之前尝试使用 .dialog( "destroy" ) 方法。这会给你一个新的开始。

【讨论】：

【解决方案4】：

很可能 jQuery UI 延迟加载 dialog('open') 上的对话框的初始化，这意味着第一个被调用的就是被设置的那个。

dialog('destroy') 有效，但我建议为第二个对话框克隆节点。见http://api.jquery.com/clone/。

【讨论】：

【解决方案5】：

我尝试了建议的想法，我需要在关闭时清除对话框，因为 2 个不同的对话框使用相同的 div。删除整个 div 将确保第二个对话框实际上不是第一个再次显示的对话框。在我的情况下，destroy 方法并没有起到作用。

close: function(ev, ui) {
    $(this).remove();
}

我在初始化对话框时向正文添加了一个 div，如果不创建一个 div 来动态填充对话框，这可能无法正常工作。

这对我有用。现在我可以在同一个页面上打开不同内容的不同对话框，之前的对话框不会对新的对话框产生任何影响。

【讨论】：