如何检测单击jQuery UI对话框的（X）关闭按钮，与dialogclose / dialogbeforeclose事件分开？

我希望能够检测到被点击的jQuery UI对话的（x）关闭按钮，但我不想使用dialogclose / dialogbeforeclose事件（因为我相信无论对话框是如何关闭的，它们都会触发）。

我尝试了$(".ui-dialog-titlebar-close").live("click") ，但这似乎不起作用。

我怎样才能做到这一点？

示例代码:(对话框关闭时，调试器不会启动）。

        $(document).ready(function() { $("#dialog").dialog(); $(".ui-dialog-titlebar-close").live("click", function() { debugger; // ** clicking the close button doesn't get to here.** }); });   
I'm in a dialog
   

Answer 1

您可以完全按照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(); }); } }); }); 

Answer 2

真是个好问题

如果您只使用点击，它会起作用

  $(".ui-dialog-titlebar-close").click( function() { debugger; }); 

但我确定这是有原因的吗？

我会继续寻找

为什么你不想用这个？

 $('.selector').bind('dialogclose', function(event, ui) { debugger; }); 

Answer 3

我知道这是一个老问题，并且OP说他不想使用beforeClose，但原因是因为它总是触发，即使是X以外的东西。但是，我注意到这里的技术不允许我阻止关闭对话框（如果有未保存的更改，我想要打开确认窗口）。 如果我们在这里使用技术，使用beforeClose，我们可以实现所需的结果，但可以取消它。 我用了：

 beforeClose: function (e, ui) { if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close') && whateverMyConditionIs) e.preventDefault(); } 

认为它可能会帮助别人！

Answer 4

您不希望通过.live等执行此操作，因为您最终将绑定到您创建的每个对话框的X. 您希望为特定目的绑定到特定对话框的X，所以……

注意在您阅读之前，请注意这是完美的，但过于复杂。 Kris Ivanov发布了一个更正确，更简洁，更恰当的答案。 结束注释

在对话框的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(); } ); } } } ); } ); 

您需要检查它是否已绑定，因为每次打开对话框时都会打开，因此多次打开会在没有它的情况下反复重新绑定相同的function。

演示： http ： //jsfiddle.net/XM2FH/