title: Calling button("refresh") on a jQuery mobile button breaks the button style
body: <p>I'm trying to dynamically update the text on a jQuery mobile button. The button is actually a link which is styled as a button.</p>
  
  <p>According to the <a href="http://api.jquerymobile.com/button/#method-refresh" rel="noreferrer">jQuery mobile documentation</a>, you should call <code>button("refresh")</code> if you manipulate the button via javascript. However, when I do this, the button's style goes a but crazy - it gets shrunk to half-height and the button looks crap.</p>
  
  <p><a href="http://jsfiddle.net/rfdQC/" rel="noreferrer">Here's a JS Fiddle which demonstrates the problem</a>.</p>
  
  <p>The code is essentially as follows:</p>
  
  <pre><code>$(function() {
      // Buttonize
      var $button = $("#myCrapButton");
      $button.button();
  
      // Change text on click
      $button.click(function() {
          $button.text("Awesome Button");
          $button.button("refresh");
      });
  });
  </code></pre>
  
  <p>What's more, calling <code>button("refresh")</code> causes the javascript error: <code>Cannot call method 'removeClass' of undefined</code>.</p>
  
  <p><strong>I know that I can work around this problem by manipulating the <code>.ui-btn-text</code> <code>span</code> that's nested inside the button</strong>; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.</p>
  
  <p>Can anyone tell me how to get the refresh call to work?</p>
  
  <p>Using versions:</p>
  
  <ul>
  <li>jQuery 1.9.1</li>
  <li>jQuery Mobile 1.3.0 (in the JSFiddle it's 1.3.0 beta but the final has the same behavior).</li>
  </ul>
  
  <p>Thanks!</p>