dialogclose/dialogbeforecloseイベントとは別に、jQuery UIダイアログの(X)閉じるボタンがクリックされたことを検出するにはどうすればよいですか?

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>
11
create イベントを使用して機能をバインドします
追加された 著者 Kris Ivanov,

4 答え

あなたは 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();
                   });
        }
    });
});
22
追加された
ああ、私は create のようなメソッド/イベントがなければならないことは知っていましたが、私はそれを探していませんでした。 +1あなたは私の上で受け入れられた答えを得なければなりません!
追加された 著者 JAAulde,
@therefromhereでは、UIによってバインドされたクリックハンドラが(ダイアログを閉じるために)クリックイベントの伝播を停止し、ライブバインドされたハンドラがトリガされないように思えます。私は確かに、ソースを読む必要があります。
追加された 著者 JAAulde,
find( '.ui-dialog-titlebar-close')しないと、バージョンに関係なく動作します。
追加された 著者 dman2306,
私はこれについて完全にはわかっていませんが、 click の場合、ウィジェットは既にこの要素とチェーンで実行をトリガーしているので、継続されていない、より複雑なデバッグは、理由を明らかにする可能性があります
追加された 著者 Kris Ivanov,
興味深いことに、なぜ $( ".ui-dialog-titlebar-close")。live( "click")が起動しないのかご存じですか?イベントを mouseover のように変更すると起動します。
追加された 著者 Quincy,
これはjquery ui 1.9以降では機能しなくなりました。 findを .find( 'button.ui-dialog-titlebar-close')に置き換えてください。
追加された 著者 mhu,

本当に良い質問

クリックだけを使用すると効果があります

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

しかし、私はライブの理由があると確信していますか?

私は見続けるだろう

なぜあなたはこれを使いたくないのですか?

$('.selector').bind('dialogclose', function(event, ui) {
   debugger;
});
2
追加された
私はGregMに同意しなければなりません。なぜなら、このページのすべての回答の単純な「束縛」は、私のために働いた唯一のものでした。それは私の対話が動的に作成されているという事実と関係しているかもしれません。
追加された 著者 Alexander,
これは私の望むもの、つまりバインドアプローチに最適でした。ありがとう!
追加された 著者 hynsey,

.live などでこれをやりたくない場合は、作成するすべてのダイアログのXにバインドされます。あなたは特定の目的のために特定のダイアログのXにバインドしたいので、...

Note Before you read on, note that this works perfectly but is overly complex. Kris Ivanov has posted a more correct, more concise, more appropriate answer. End Note

ダイアログの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 が実行されるため、バインドされているかどうかのチェックが必要です。複数のオープンは、同じ機能を何度も何度も再バインドします。

Demo: http://jsfiddle.net/XM2FH/

1
追加された
@ KrisIvanov LOL、ええ、あなたの答えに私のコメントを見て、私のメモを追加しました。
追加された 著者 JAAulde,
単に open の代わりに create イベントを使用するだけで、
追加された 著者 Kris Ivanov,
うん、それは泣いて見ていない、ダウングレードしていない、まだ有用な情報
追加された 著者 Kris Ivanov,

私はこれが古い質問であることを知っています。そして、OPはbeforeCloseを使いたくないと言いましたが、その理由は、X以外のものであっても常に発生するからです。しかし、私はダイアログが閉じないようにしています(保存されていない変更があれば、確認ウィンドウを開きたい)。ここでテクニックを使うならば、beforeCloseを使うと、望みの結果を得ることができますが、取り消すことができます。私は使用した:

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

それは他の誰かを助けるかもしれないと思った!

1
追加された