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.
I doubt I have to be such creative as
$(this).find('button').attr(...)
to disabled a button there ?
The documentation for dialog() says:
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();
}
}
});
The format of the buttons in the dialog is a <button> with a <span> inside, like this:
<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 click event 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:
buttons: {
'button text': function(e){
$(e.target).closest("button") //this is the button, do something with it :)
}
}
