How can I detect that the (X) close button of a jQuery UI Dialog was clicked, separately from the dialogclose/dialogbeforeclose events?

Question

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 / dialogbeforeclose

Answer 1

You do not want to do this via .live etc 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...

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

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:

$( 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 open runs every time the dialog opens, so multiple opens would rebind the same functionality over and over without it.

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