Як я можу визначити, що кнопка закриття (X) діалогового вікна користувача для інтерфейсу jQuery була натиснута окремо від діалогового вікна/діалогового повідомлення про події?

Я хочу виявити кнопку закриття (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>
11
використовуйте подія create , щоб пов'язати свою функціональність
додано Автор Kris Ivanov, джерело

4 Відповіді

ви можете зробити саме те, що запропоновано 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();
                   });
        }
    });
});
22
додано
Ага, я знав, що повинен бути create -подібний метод/подія, але я не турбувався шукати його. +1, і ви повинні отримати прийняту відповідь через мене!
додано Автор JAAulde, джерело
@ Із цього я підозрюю, що обробник кліків, пов'язаний з користувальницьким інтерфейсом (для закриття діалогу), припиняє поширення події кліків, тим самим зберігаючи обробник, який обробляється в реальному часі, від ініціювання. Мені доведеться читати джерело, щоб бути впевненим, однак.
додано Автор JAAulde, джерело
Чому б не зробити find ('. Ui-dialog-titlebar-close') , то він працює незалежно від версії.
додано Автор dman2306, джерело
Я не цілком впевнений в цьому, але live зв'язується в корені DOM, у випадку click він не перемішається, оскільки віджет вже запускає виконання на цьому елементі та ланцюжку не продовжується, більша частина налагодження може виявити причину
додано Автор Kris Ivanov, джерело
Просто цікаво, у вас є якась ідея, чому $ (". Ui-dialog-titlebar-close"). Жити ("клацнути") не спрацьовує? Це спрацьовує, якщо змінив подію, як mouseover
додано Автор Quincy, джерело
Це більше не працює в jQuery ui 1,9+. Замініть знахідку на: .find ('button.ui-dialog-titlebar-close')
додано Автор mhu, джерело

Дійсно хороше запитання

Він працює, якщо ви використовуєте лише клік

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

Але я впевнений, що є причина жити?

Я продовжу шукати

І чому ти не хочеш це використовувати?

$('.selector').bind('dialogclose', function(event, ui) {
   debugger;
});
2
додано
Я повинен погодитися з GregM - чому б не просто "зв'язати" всі відповіді на цій сторінці, це був єдиний, який працював для мене. Можливо, це було пов'язано з тим, що мій діалог створювався динамічно.
додано Автор Alexander, джерело
це було ідеально підходить для того, що я хотів - підхід до з'єднання. Дякую!
додано Автор hynsey, джерело

Ви не хочете, щоб зробити це за допомогою .live і т.д., як ви в кінцевому підсумку зв'язування з X кожного діалогу ви створюєте. Ви хочете прив'язати до певного діалогу X для певної мети, так що ...

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

У діалоговому вікні відкритого методу перевірте, чи ви вже пов'язали клік із "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 , тому кілька відкриваються, знову і знову перетворювати ту саму функцію без неї.

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

1
додано
@ Крис Іванов ЛОЛ, так, подивіться мій коментар до вашої відповіді, і моя додана зауваження до мене.
додано Автор JAAulde, джерело
Не дуже ефективно стежити за зв'язком, просто використовуйте подію create замість open
додано Автор Kris Ivanov, джерело
Так, не бачила, як вона співає, не знизила, все-таки корисну інформацію
додано Автор Kris Ivanov, джерело

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

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

Думав, це може допомогти комусь іншому!

1
додано