Как я могу обнаружить, что нажата кнопка закрытия (X) диалогового окна jQuery UI, отдельно от событий dialogclose/dialogbeforeclose?

Я хотел бы иметь возможность обнаруживать кнопку (x) закрытия диалогового окна jQuery UI Dialogue, но я не хочу использовать события dialogclose/dialogbeforeclose (так как я считаю, что они будут срабатывать независимо от того, как диалог был закрыт).

Я пробовал $(".ui-dialog-titlebar-close").live("click"), но это не работает.

Как я могу это сделать?

Пример кода: (отладчик не запускается, когда диалог закрыт).

<!DOCTYPE html>
<html>
<head>
  <link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'; return false;" 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>

Ответ 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();
                   });
        }
    });
});

Ответ 2

Действительно хороший вопрос

Работает, если вы используете только щелчок

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

Но я уверен, что есть причина для жизни?

Я продолжу поиск

И почему вы не хотите использовать это?

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

Ответ 3

Вы не хотите делать это через .live и т.д., так как вы в конечном итоге привязываетесь к X каждого создаваемого вами диалога. Вы хотите привязать к определенному диалоговому X для определенной цели, поэтому...

Примечание Прежде чем вы начнете читать, обратите внимание, что это работает отлично, но слишком сложно. Крис Иванов опубликовал более правильный, более сжатый, более подходящий ответ. Конечная записка

В открывшемся диалоговом окне проверьте, не привязали ли вы клик к '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/

Ответ 4

Я знаю, что это старый вопрос, и OP сказал, что он не хочет использовать beforeClose, но причина в том, что он всегда срабатывает даже для вещей, отличных от X. Однако я заметил, что методы здесь не 't позвольте мне предотвратить закрытие диалога (я хочу, чтобы окно подтверждения было открыто, если есть несохраненные изменения). Если мы здесь используем методы, используйте beforeClose, мы можем достичь желаемого результата, но сделаем его отмененным. Я использовал:

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

Думал, что это может помочь кому-то еще!