Enabling disabled button does not refresh correctly
I am disabling an input button on my data entry form until all of the data validates correctly. When I enable the button it does not always display the same as the Cancel button that was not disabled. I occasionally appears as though the mouse is hovering over it. I have discovered that if I tab to the button or if I hover the mouse over it, it then displays OK after I tab to the next button or move the mouse off of it.
This is the html that defines the button.
<input type="button" id="submitButton" value="Submit Changes"></input>
This is the javascript that inits the button.
$("#submitButton").button().click(function() {
submitData(); // Submits data via Ajax
});
This is the command I am using to disable the button.
$("#submitButton").button("disable").button("refresh");
This is the command I am using to enable the button.
$("#submitButton").button("enable").button("refresh");
Note, I am using this theme.
Has anyone else seen this behavior?