title: Bootstrap 3 Stateful button not working with $(document).ready
body: <p>While playing with <a href="http://getbootstrap.com/javascript/#buttons" rel="nofollow">stateful buttons in Bootstrap 3</a>, I encountered a problem. As shown in snippet#2 (<a href="http://jsfiddle.net/wahidsadik/YCst4/1024/" rel="nofollow">jsfiddle</a>), I am expecting the "Loading state" button will change its label to "Loading", and then will change itself back to "Loading state"; this version works. But, snippet#3 (<a href="http://jsfiddle.net/wahidsadik/YCst4/1023/" rel="nofollow">jsfiddle</a>) does not work.</p>
  
  <p>Can anyone explain why it is like that?</p>
  
  <h3>Snippet#1: HTML code</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button id="loading-example-btn" data-loading-text="Loading..." 
      class="btn btn-primary"&gt;Loading state&lt;/button&gt;
  </code></pre>
  
  <h3>Snippet#2: JS code that works</h3>
  
  <pre class="lang-js prettyprint-override"><code>(function ($) {
      $('#loading-example-btn').click(function () {
          var btn = $(this);
          btn.button('loading');
          setTimeout(function () {
              btn.button('reset');
          }, 1000);
      });
  })(jQuery);
  </code></pre>
  
  <h3>Snippet#3: JS code that does not work</h3>
  
  <pre class="lang-js prettyprint-override"><code>(function ($) {
      $(document).ready(function () { //&lt;-- this is causing the button not to work
          $('#loading-example-btn').click(function () {
              var btn = $(this);
              btn.button('loading');
              setTimeout(function () {
                  btn.button('reset');
              }, 1000);
          });
      });
  })(jQuery);
  </code></pre>
  
  <h2>Edit</h2>
  
  <p>Thanks @Hüseyin BABAL. He helped me realize that I was using an incompatible Bootstrap CSS (I borrowed from someone else's jsfiddle). Once I fixed it (<a href="http://jsfiddle.net/wahidsadik/YCst4/1026/" rel="nofollow">jsfiddle</a>), was taken care of.</p>