Question

使用以下按钮创建对话框时：

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

我是否可以访问点击事件处理程序中的按钮？

$(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> 1}}只要让你的处理程序按下按钮即使你已经在它上面，就像这样：

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

Here's a quick demo of this working

jQuery UI对话框按钮

2 个答案: