【发布时间】：2010-09-15 09:00:41
【问题描述】：
我正在使用jquery-ui-dialog 插件
我正在寻找在某些情况下关闭对话框时刷新页面的方法。
有没有办法从对话框中捕获关闭事件？
我知道我可以在单击关闭按钮时运行代码，但这不包括用户使用转义或右上角的 x 关闭。
【问题讨论】：
标签： javascript jquery jquery-ui modal-dialog jquery-ui-dialog
【发布时间】：2010-09-15 09:00:41
【问题描述】：
我找到了！
您可以使用以下代码捕获关闭事件：
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
显然我可以用我需要做的任何事情来替换警报。
编辑：从 Jquery 1.7 开始，bind() 已变为 on()
【讨论】：
-
错字：$('div#popup_content').bind('dialogclose', function(event)) { ... }
-
这很有帮助，但
$('div#popup_content')对吗？我应该用什么替换它，记住我的对话框是这样打开的jQuery.fn.dialog.open({}) -
我看到对话框先关闭，然后出现警报，如果每个人的情况都一样，有人可以帮我让警报先出现，然后单击“确定”然后窗口关闭吗？纠正我....
-
这应该被更新为使用 on() 而不是现在已经过时的 bind()。
-
请记住，如果以前从未在页面上打开过 jQuery UI 对话框，则覆盖 div 将不会存在于 DOM 中。因此，您可以考虑这样做：
$('body').on('dialogclose', '.ui-dialog', function(){...});
我相信您在创建对话框时也可以这样做（从我所做的项目中复制）：
dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});
注意close: CloseFunction
【讨论】：
-
这个答案对我来说似乎比接受的答案更正确。此外，可以在此处找到正确的 API 文档：api.jqueryui.com/dialog/#event-close
-
Jake N - 您需要实际编写一个可访问名为“CloseFunction”的对话框的函数才能使其正常工作，例如，您可以在上面编写
var CloseFunction = function() { //Do your custom closing stuff here }; -
这是一个选项，但有时代码会在不同的地方使用。当您想在不同的上下文中添加不同的行为并重用对话框创建代码以获得标准化时，所选答案适用。
-
你有两次
overlay。这不是必要的吧？ -
这行得通，在这里绝对是一个需要和有用的答案，但它也会在任何时候以任何方式关闭对话框时运行 CloseFunction 代码，而不仅仅是在使用 X 或其他东西关闭时。因此，如果您想在使用 X 或 Cancel 按钮关闭对话框时运行某些代码，而不是当它被其他事件关闭时（例如在我的情况下，当提交的输入被验证为正确时），那么这不会工作。
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});
【讨论】：
$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
对话框的“close”属性给出了相同的关闭事件。
【讨论】：
你也可以试试这个
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
【讨论】：
这对我有用...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});
【讨论】：
从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。
因为实际上没有人使用 .on() 而不是 bind() 创建答案，所以我决定创建一个。
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});
【讨论】：
-
OP的回答基本一致
-
@reggaeguitar 是真的。 OP 在 2015 年更新了 on() 的答案 :)
-
我不知道他们在你的更新之后更新了他们的，如果你编辑你的答案，我会将我的反对票改为赞成票
在示例下添加选项“关闭”并执行您想要的内联函数
close: function(e){
//do something
}
【讨论】：
如果我理解您所说的窗口类型，那么 $(window).unload() （对于对话框窗口）是否会为您提供所需的钩子？
（如果我误解了，并且您说的是通过 CSS 制作的对话框，而不是弹出式浏览器窗口，那么 all 关闭该窗口的方式是您可以注册点击处理程序的元素.)
编辑： 啊，我现在看到你在谈论 jquery-ui 对话框，它是通过 CSS 制作的。您可以通过为具有类 ui-dialog-titlebar-close 的元素注册一个单击处理程序来挂钩关闭窗口的 X。
也许更有用的是你告诉你如何快速解决这个问题。在显示对话框时，只需弹出打开 FireBug 并 Inspect 可以关闭窗口的元素。您将立即看到它们是如何定义的，并为您提供了注册点击处理程序所需的内容。
因此，要直接回答您的问题，我相信答案确实是“否”-没有可以挂钩的关闭事件，但是“是”-您可以轻松挂钩所有关闭对话框并获得你想要什么。
【讨论】：
-
嘿，安迪。我很喜欢 jquery-ui 中的对话框，它是通过 css 和 javascript 制作的。通过查看代码，我认为那里有一个钩子，但我不知道如何获得它。
您可以尝试以下代码来捕获任何项目的关闭事件：页面、对话框等。
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});
【讨论】：
-
只需使用 .on() -- 而不是 .live() 或 .bind()