Кнопки JQuery UI Dialog

Question

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

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

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

$(this)

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

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

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

чтобы отключить кнопку там?

Answer 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();
        }
    }
});

Answer 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 :)
  }
}

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