Changing the value of a jQuery mobile button using jQuery

Question

Wondering if you can help me out. I seem to have a problem changing the text of my jQuery Mobile buttons with jQuery.

$(\"#myButton .ui-btn-text\").text(\"New te         


        

Answer 1

With jquery.mobile-1.1.0 I was experiencing something slightly different and had trouble sifting through the responses to find a workable answer. I've documented the problems I experienced and the solution I found below.

Snippet 1

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').html("Check-in to receive points");
  });
</script>

With this, I'm able to change the text, but the method clears out the added spans and classes, thus compressing the button.

HTML

<div id="task_button">
 <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
 Check-in to receive points
 </a>
 </div>

Snippet 2

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points");
  });
</script>

This had no effect upon the button text.

HTML

<div id="task_button">
  <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">
      Original Text.
      </span>
    <span class="ui-icon ui-icon-check ui-icon-shadow ui-iconsize-18">&nbsp;
 </span>
</span>
</a>
</div>

Snippet 3

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points").button("refresh");
  });
</script>

This generated the following error message:

cannot call methods on button prior to initialization; attempted to call method 'refresh'

Which was confusing to me because this function is being called only after the page is initialized. Reading further, I then noticed Priyank's reference to a working answer at stackoverflow.com/a/7279843/61821

Snippet 4 - Working

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button .ui-btn-text').val("Check-in to receive points");
  });
</script>

A better jQuery selector works like a charm.