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

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

11 голосов
/ 28 октября 2011

Я хотел бы иметь возможность обнаруживать (x) кнопку закрытия диалогового окна пользовательского интерфейса jQuery, но я не хочу использовать события 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>

Ответы [ 4 ]

24 голосов
/ 28 октября 2011

вы можете сделать именно то, что 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();
                   });
        }
    });
});
4 голосов
/ 28 апреля 2015

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

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

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

3 голосов
/ 28 октября 2011

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

Это работает, если Вы используете только щелчок 

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

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

Я продолжу искать

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

$('.selector').bind('dialogclose', function(event, ui) {
   debugger;
});
1 голос
/ 28 октября 2011

Вы не хотите делать это через .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/

...