Jquery mobile loses custom style after button text changed -

i have simple (newbie here) task in jquery mobile. change text of button has custom style applied. can change text without problem in 'pageinit' event lose custom style in process. have read lots of article in stackoverflow still lack working solution.

excerpt of html page below loaded ajax

css

#goal .ui-btn-inner   {     text-align: center;     background: chartreuse;     ui-disabled: true; } 

button styled

<div data-corners="false" data-role="controlgroup" >   <a href="#" data-role="button" id="goal" >    text changed   </a> </div> ... 

here jquery mobile code changes button text.

$(document).delegate('#problem_screen', 'pageinit', function() {   $('#goal').on('click', function() {     console.log('goal clicked');   });   $('#goal .ui-btn-text').text('new button text'); });  

thanks

finally got work. first jqm mistake define custom styles on each page of multiple page application. wrong -- must define custom styles in 1 location, typically style sheet file included every page. mistake have same id value on different pages. wrong -- id values must unique throughout application.

the api applies (in case enhances style) .addclass("). in case defined style follows:

.goal-style {  text-align: center;  background: charteuse;  ui-disabled: true; } 

now after update button's text say:

$('#goal').addclass('goal-style');  // note: not use '.goal-style'