title: bootstrap loading button state not working
body: <p>I want my button to change to a loading state as per the boostrap documentation <a href="http://getbootstrap.com/javascript/#buttons" rel="nofollow">http://getbootstrap.com/javascript/#buttons</a></p>
  
  <p>Why does my button not change to a loading state here?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
  &lt;HEAD&gt;
      &lt;TITLE&gt;Bootstrap Example&lt;/TITLE&gt;
      &lt;link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css "&gt;
  &lt;STYLE&gt;
  &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
      &lt;button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)"&gt;hola!!!&lt;/button&gt;
  
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function(){
              $('#btnD').click(function(){
                    var btn = $(this); 
                    btn.button('loading');
              });
          });
      &lt;/script&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>