How can I detect that the (X) close button of a jQ

2019-04-20 05:56发布

站内问答 / jQuery
402 4 4

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 events (since I believe these will fire regardless of how the dialog was closed).

I tried $(".ui-dialog-titlebar-close").live("click"), but that doesn't seem to work.

How can I do this?

Sample code: (the debugger doesn't fire up when the dialogue is closed).

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

4条回答
手持菜刀，她持情操
2楼-- · 2019-04-20 06:21

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/

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2019-04-20 06:34

Really good question

It's working if You use only the click

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

But i'm sure there's a reason for the live ?

I'll continue looking

And why you don't want to use this ? 

$('.selector').bind('dialogclose', function(event, ui) {
   debugger;
});
查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
4楼-- · 2019-04-20 06:41

you could do exactly what JAAulde suggested, or avoiding tracking binding and use the create event:

$(document).ready(function() {
    $('#dialog').dialog({
        create: function() {
            $(this).closest('div.ui-dialog')
                   .find('.ui-dialog-titlebar-close')
                   .click(function(e) {
                       alert('hi');
                       e.preventDefault();
                   });
        }
    });
});
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2019-04-20 06:41

I know this is an old question, and the OP said he didn't want to use beforeClose, but the reason was because it always fires, even for things other than the X. However, I noticed that the techniques here don't allow me to prevent a dialog from closing (I want a confirm window to open if there are unsaved changes). If we Ithe techniques here, use beforeClose, we can achieve the desired result, but make it cancellable. I used:

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

Thought it might help someone else!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)