Кнопки jQuery UI Dialog

при создании диалога с такими кнопками, как:

buttons:    {
            'button text': function(){                              
                // do something
            },

У меня есть доступ к кнопке внутри обработчика события клика?

$(this)

- это объект context/jQuery для всего диалогового окна.

Я сомневаюсь, что я должен быть таким креативным, как

$(this).find('button').attr(...)

отключить кнопку?

Ответы

Ответ 1

Документация для dialog() говорит:

Ключ свойства - это текст кнопка. Значение - это обратный вызов функция, когда кнопка щелкнул. Контекст обратного вызова элемент диалога; , если вам нужно доступ к кнопке, он доступен как цель объекта события.

$('#myDialog').dialog({
    'title': 'My Dialog Header',
    'buttons': {
        'My Button': function(event) {
            // here is the modification of the button
            // opacity set to 25%, all events unbound
            $(event.target).css({opacity: 0.25}).unbind();
        }
    }
});

Ответ 2

Формат кнопок в диалоговом окне - <button> с <span> внутри, например:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <span class="ui-button-text">Button text</span>
</button>

Итак, когда вы нажимаете, фактическое событие click происходит на этом <span> или <button>, в зависимости от вашего стиля (например, поля на пролете), поэтому, чтобы <button> просто запустил ваш обработчик до кнопки, даже если вы уже на ней, например:

buttons: {
  'button text': function(e){
     $(e.target).closest("button") //this is the button, do something with it :)
  }
}

Вот краткая демонстрация этой работы