jQuery UI对话框按钮

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

这是这个工作的快速演示