jquery ui override the css class, how to avoid it? - ruby-on-rails

Question

i am new in jquery, i am using rails 3.2.19 and jquery-ui-rails 5.0.0.
I am create button using css class="button", when ajax call it override css property
like this class="button_new ui-button ui-widget ui-state-default ui-corner-all how to avoid this.
.button_new {
background: #3b5998;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: #ffffff;
font-size: 11px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button_new:hover {
border-top-color: #edf0f5;
background: #edf0f5;
color: #ff0000;
}
.button_new:active {
border-top-color: #dfe7eb;
background: #dfe7eb;
}

Answer 1

First, I would add an ID to the button so we don't override some instances where you want jQuery UI to set its own classes.
<button id="my-button" class="button">My Button</button>
Then you can load your own jQuery script after jQuery UI is executed and use something like this:
$(document).ready(function() {
// remove jQuery UI classes
$('#my-button').removeClass('button_new ui-button ui-widget ui-state-default ui-corner-all');
// add button class back
$('#my-button').addClass('button');
});
This will replace the auto-generated classes with your classes, while not conflicting with other instances where you need jQuery UI to exhibit this behavior.