jQuery UI 对话框按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2780052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Dialog buttons
提问by jAndy
when creating a dialog with buttons like:
创建带有以下按钮的对话框时：
buttons: {
'button text': function(){
// do something
},
do I have access to the button within the click event handler?
我可以访问单击事件处理程序中的按钮吗？
$(this)
is the context/jQuery object of the whole dialog.
是整个对话框的上下文/jQuery 对象。
I doubt I have to be such creative as
我怀疑我必须像
$(this).find('button').attr(...)
to disabled a button there ?
禁用那里的按钮？
回答by artlung
The documentation for dialog()says:
的文档dialog()说：
The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.
属性键是按钮的文本。该值是单击按钮时的回调函数。回调的上下文是对话框元素；如果您需要访问按钮，它可以作为事件对象的目标。
$('#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();
}
}
});
回答by Nick Craver
The format of the buttons in the dialog is a <button>with a <span>inside, like this:
对话框中按钮的格式是a <button>with a <span>inside，如下所示：
<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>
So when you click, the actual clickevent happens on that <span>or <button>, depending on your styling (margin on the span for example), so to get the <button>just make your handler go up to the button even if you're already on it, like this:
因此，当您单击时，实际click事件会发生在<span>或 上<button>，具体取决于您的样式（例如，跨度上的边距），因此<button>即使您已经在按钮上，也要让处理程序上升到按钮上，就像这样：
buttons: {
'button text': function(e){
$(e.target).closest("button") //this is the button, do something with it :)
}
}
