Question

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

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

我该怎么做？

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

<!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>

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

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

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

认为它可以帮助别人！

Answer 3

非常好的问题

如果您只使用点击

，它就会起作用

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

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

我会继续寻找

为什么你不想用这个？

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

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(); } ); } } } ); } );

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

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

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

4 个答案: