title: Bootstrap Switch Click Event Not Firing In Form Wizard
body: <p>I have a form wizard that has a checkbox in it. I am using bootstrap switch to display a toggle button to the user. Every time the user click on the button, it should display YES or NO (for check/uncheck). However, the click event does not work unless I do one of the following:</p>
  
  <ol>
  <li>Remove the wizard, and the bootstrap switch button will work as expected.</li>
  <li><p>Comment the bootstrap switch code </p>
  
  <p><strong><code>$("[type='checkbox']").bootstrapSwitch();</code></strong></p></li>
  <li><p>Add a click event using delegate</p>
  
  <p>$('#UserForm').on('click', '#checkbox1', function () {
          console.log('you click me');
      });</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    //  $("[type='checkbox']").bootstrapSwitch();
    //comment out the above line code.
  });
  
  var form = $("#UserForm").show();
  
  form.steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {
      // Allways allow previous action even if the current form is not valid!
      if (currentIndex &gt; newIndex) {
        return true;
      }
      // Forbid next action on "Warning" step if the user is to young
      if (newIndex === 3 &amp;&amp; Number($("#age-2").val()) &lt; 18) {
        return false;
      }
      // Needed in some cases if the user went back (clean up)
      if (currentIndex &lt; newIndex) {
        // To remove error styles
        form.find(".body:eq(" + newIndex + ") label.error").remove();
        form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
      }
      form.validate().settings.ignore = ":disabled,:hidden";
      /// return form.valid();
      return ValidForm(this, currentIndex);
    },
    onStepChanged: function(event, currentIndex, priorIndex) {
      // Used to skip the "Warning" step if the user is old enough.
      if (currentIndex === 2 &amp;&amp; Number($("#age-2").val()) &gt;= 18) {
        form.steps("next");
      }
      // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
      if (currentIndex === 2 &amp;&amp; priorIndex === 3) {
        form.steps("previous");
      }
    },
    onFinishing: function(event, currentIndex) {
      return ValidForm(this, currentIndex);
      //  return form.valid();
    },
    onFinished: function(event, currentIndex) {
      submitForm();
    }
  }).validate({
    errorPlacement: function errorPlacement(error, element) {
      element.before(error);
    },
    rules: {
      confirm: {
        equalTo: "#password-2"
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"&gt;&lt;/script&gt;
  
  &lt;form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate"&gt;
    &lt;h3&gt;User&lt;/h3&gt;
    &lt;fieldset&gt;
      &lt;input type="checkbox" id="checkbox1" name="checkbox1" /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Updated on 03/22/16</strong></p>
  
  <p>If I remove the piece of code below, the click event fire with no problem.</p>
  
  <pre><code>$("[type='checkbox']").bootstrapSwitch();
  </code></pre>