【问题标题】：how to destroy jquery dialog when pressing escape?按下转义键时如何破坏jquery对话框？
【发布时间】：2012-11-22 00:41:18
【问题描述】：

按escape时如何销毁jquery对话框？

有没有办法添加这样的代码： $.dialog('destroy');

在关闭事件中？这是关闭事件：它看到最后一个“else”有一个隐藏方法，这就是那个人。但不能破坏那里的任何东西：

close: function( event ) {
    var that = this,
        maxZ, thisZ;

    if ( !this._isOpen ) {
        return;
    }

    if ( false === this._trigger( "beforeClose", event ) ) {
        return;
    }

    this._isOpen = false;

    if ( this.overlay ) {
        this.overlay.destroy();
    }

    if ( this.options.hide ) {
        this._hide( this.uiDialog, this.options.hide, function() {
            that._trigger( "close", event );                
        });
    } else {
        this.uiDialog.hide();
        this._trigger( "close", event );
    }

【问题讨论】：

您只想关闭对话框？如果您只想关闭对话框，只需执行 $.dialog({ closeOnEscape: true });
不，这是默认设置的。如果我在逃跑时关闭，内容仍然存在。它只是隐藏内容。下次用户创建对话框时，我的选项卡会出现问题。我找到了按钮的解决方案。我只是添加了 .dialog('destroy') ，它确实从 DOM 中删除了所有内容。我希望这种行为与关闭事件相关联，所以当我按下转义键时，我的一切都从 DOM 中消失了。我已经编辑了我的问题。
创建对话框时为什么不直接删除内容呢？然后就可以使用 closeOnEscape 方法了。

标签： jquery jquery-ui dialog jquery-ui-dialog jquery-dialog

【解决方案1】：

我能找到的最优雅的方法是监听对话框的关闭事件，然后销毁它。

$('#mydialog').dialog({
    buttons: {
        OK: function(event) {
            $(this).dialog("close");
        }
    },
    close: function(event, ui) {
        $(this).dialog("destroy");
    },
});

这样，ESCAPE 和 OK 按钮都会关闭对话框，然后事件侦听器启动并从 DOM 中删除对话框。

【讨论】：

【解决方案2】：

jsBin demo

$(document).keydown(function(e) {
      // ESCAPE key pressed
      if (e.which == 27) {
         $('#dialog').dialog('destroy');
      }
});

【讨论】：

如果你想让你的 jquery-ui 文件尽可能的原始，这会起作用。感谢您的贡献

【解决方案3】：

找到了一种直接编辑关闭事件的方法，因为我希望在整个应用程序中都有这种行为。

发件人：

else {
    this.uiDialog.hide();
    this._trigger( "close", event );
}

收件人：

else {
    this.uiDialog.remove();
    this._trigger( "close", event );
}

非常感谢！

【讨论】：

请注意，您可能不应该直接编辑插件，因为这会使将来很难找到错误并使插件的文档无用。如果您碰巧在此处发布问题，这也会使 SO 上的某个人难以调试。

【解决方案4】：

从 DOM 中销毁 Dialog：

$(this).dialog('destroy').remove()

解释：

此代码将销毁对话框并从 DOM 中删除拥有该对话框的 Div。

例如：

我有一个名为 $('#report_dialog') 的对话框，我想从 DOM 中删除元素

所以我可以使用这样的语句，

  **$('#report_dialog').dialog('destroy').remove();**

在按下 Esc 键的同时从 DOM 中销毁对话框： ==================================================== ======

I just Want to override the **closeOnEscape** event in jquery dialog.


$(document).keydown(function(e) {

    // ESCAPE key pressed
    if (e.which == 27) {
        $('#report_dialog').dialog('destroy').remove();
    }
});

我们可以完全使用key code，否则$.ui.keyCode.ESCAPE它会自动获取key code并成功从DOM中删除

【讨论】：