web-dev-qa-db-ja.com

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>
jqueryjquery-uidialog
13
John Carter

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

これは古い質問であり、OPはbeforeCloseを使用したくないと言っていましたが、その理由は、X以外の場合でも常に起動するためです。ただし、ここでの手法では許可されていないことに気付きました。ダイアログが閉じないようにします（保存されていない変更がある場合は確認ウィンドウを開きたい）。ここでテクニックを使用する場合、beforeCloseを使用すると、目的の結果を達成できますが、キャンセル可能になります。私が使用した：

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

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

4
dmeglio

本当に良い質問

クリックのみを使用すると機能します

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

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

探し続けます

そして、なぜあなたはこれを使いたくないのですか？

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

作成するすべてのダイアログのXにバインドされるため、.liveなどを介してこれを実行する必要はありません。特定の目的のために特定のダイアログのXにバインドしたいので、...

注読み進める前に、これは完全に機能しますが、非常に複雑であることに注意してください。 Kris Ivanovは、より正確で、より簡潔で、より適切な回答を投稿しました。 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が実行されるため、バインドされているかどうかを確認する必要があります。そのため、複数回開くと、同じ機能がバインドされていないと何度も再バインドされます。

デモ：http://jsfiddle.net/XM2FH/

1
JAAulde