title: Make my button work when using bootstrap switch?
body: <p>I have the switch button showing on/off, when switch in between. I don't seem to see any errors on browser while inspecting it. Yet if I use JsFiddlenet as a browser IDE, the button are working fine. Maybe let me share the order of my HTML for using bootstrap and javascript.</p>
  
  <p>The html Part:</p>
  
  <pre><code>&lt;link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" /&gt;
  &lt;pre lang="Javascript"&gt;
      &lt;div class = "wrapper" align = "center"&gt;
         &lt;div class="btn-group" id="toggle_event_editing"&gt;
            &lt;button type="button" class="btn btn-info locked_active"&gt;OFF&lt;/button&gt;
            &lt;button type="button" class="btn btn-default unlocked_inactive"&gt;ON&lt;/button&gt;
        &lt;/div&gt; 
        &lt;div class="alert alert-info" id="switch_status"&gt;
           Switched off. 
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And the JS Part:</p>
  
  <pre><code>&lt;script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
     $('#toggle_event_editing button').click(function(){
      if( $(this).hasClass('locked_active') ||
          $(this).hasClass('unlocked_inactive')) {
  
          /* code to do when unlocking */
          $('#switch_status').html('Switched on.');
      } else {
          /* code to do when locking */
          $('#switch_status').html('Switched off.');
      }
  
      /* reverse locking status */
      $('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
      $('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
  });
  &lt;/script&gt;
  </code></pre>