如何检测 jQuery UI 对话框的 (X) 关闭按钮是否被单击，与 dialogclose/dialogbeforeclose 事件分开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7924152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect that the (X) close button of a jQuery UI Dialog was clicked, separately from the dialogclose/dialogbeforeclose events?
提问by John Carter
I'd like to be able to detect the (x) close button of a jQuery UI Dialogue being clicked, but I don't want to use the dialogclose/ dialogbeforecloseevents (since I believe these will fire regardless of how the dialog was closed).
我希望能够检测到被点击的 jQuery UI 对话的 (x) 关闭按钮，但我不想使用dialogclose/dialogbeforeclose事件（因为我相信无论对话框如何关闭，这些都会触发）。
I tried $(".ui-dialog-titlebar-close").live("click"), but that doesn't seem to work.
我试过了$(".ui-dialog-titlebar-close").live("click")，但这似乎不起作用。
How can I do this?
我怎样才能做到这一点？
Sample code: (the debugger doesn't fire up when the dialogue is closed).
示例代码：（当对话关闭时调试器不会启动）。
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
$(".ui-dialog-titlebar-close").live("click", function() {
debugger; // ** clicking the close button doesn't get to here.**
});
});
</script>
</head>
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
</body>
</html>
回答by Kris Ivanov
you could do exactly what JAAuldesuggested, or avoiding tracking binding and use the createevent:
您可以完全按照JAAulde 的建议进行操作，或者避免跟踪绑定并使用该create事件：
$(document).ready(function() {
$('#dialog').dialog({
create: function() {
$(this).closest('div.ui-dialog')
.find('.ui-dialog-titlebar-close')
.click(function(e) {
alert('hi');
e.preventDefault();
});
}
});
});
回答by dmeglio
I know this is an old question, and the OP said he didn't want to use beforeClose, but the reason was because it always fires, even for things other than the X. However, I noticed that the techniques here don't allow me to prevent a dialog from closing (I want a confirm window to open if there are unsaved changes). If we Ithe techniques here, use beforeClose, we can achieve the desired result, but make it cancellable. I used:
我知道这是一个老问题，OP 说他不想使用 beforeClose，但原因是它总是会触发，即使对于 X 以外的东西也是如此。但是，我注意到这里的技术不允许我防止对话框关闭（如果有未保存的更改，我希望打开一个确认窗口）。如果我们使用这里的技术，使用 beforeClose，我们可以达到预期的结果，但使其可取消。我用了：
beforeClose: function (e, ui) {
if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close') && whateverMyConditionIs)
e.preventDefault();
}
Thought it might help someone else!
认为它可能会帮助别人！
回答by GregM
Really good question
真的很好的问题
It's working if You use only the click
如果您只使用点击它会起作用
$(".ui-dialog-titlebar-close").click( function() {
debugger;
});
But i'm sure there's a reason for the live ?
但我确定直播是有原因的？
I'll continue looking
我会继续寻找
And why you don't want to use this ?
为什么你不想使用这个？
$('.selector').bind('dialogclose', function(event, ui) {
debugger;
});
回答by JAAulde
You do not want to do this via .liveetc as you'll end up binding to the X of every dialog you create. You want to bind to a specific dialog's X for a specific purpose, so...
您不想通过.liveetc执行此操作，因为您最终会绑定到您创建的每个对话框的 X。您想出于特定目的绑定到特定对话框的 X，因此...
NoteBefore you read on, note that this works perfectly but is overly complex. Kris Ivanovhas posted a more correct, more concise, more appropriate answer. End Note
注意在继续阅读之前，请注意这可以完美运行，但过于复杂。Kris Ivanov发布了一个更正确、更简洁、更合适的答案。 尾注
In the dialog's open method, check to see if you've already bound the click to the 'X'. If not, flag that you have and then find your instance's 'X' and bind it:
在对话框的 open 方法中，检查您是否已经将点击绑定到“X”。如果没有，请标记您拥有，然后找到您的实例的“X”并绑定它：
$( function()
{
$( '#dialog' ).dialog( {
open: function() //runs every time this dialog is opened
{
var $dialog = $( this );
if( ! $dialog.data( 'titleCloseBound' ) )
{
$dialog
.data( 'titleCloseBound', true ) //flag as already bound
.closest( 'div.ui-dialog' ) //traverse up to the outer dialog wrapper
.find( 'a.ui-dialog-titlebar-close' ) //search within it for the X
.bind( 'click', function( e ) //bind it
{
alert( 'hi' );
e.preventDefault();
} );
}
}
} );
} );
You need the check for whether it has been bound because openruns every time the dialog opens, so multiple opens would rebind the same functionality over and over without it.
您需要检查它是否已绑定，因为open每次打开对话框时都会运行，因此多次打开会在没有它的情况下一遍又一遍地重新绑定相同的功能。
