Bootstrap 窗体向导中未触发切换单击事件

Question

我有一个表单向导，里面有一个复选框。我正在使用 bootstrap 开关向用户显示切换按钮。每次用户点击按钮时，它应该显示 YES 或 NO（对于 check/uncheck）。但是，单击事件不起作用，除非我执行以下操作之一：

删除向导，bootstrap 开关按钮将按预期工作。
注释bootstrap开关代码

$("[type='checkbox']").bootstrapSwitch();
使用委托添加点击事件

$('#UserForm').on('click', '#checkbox1', 函数 () { console.log('you click me'); });

$(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 > newIndex) {
      return true;
    }
    // Forbid next action on "Warning" step if the user is to young
    if (newIndex === 3 && Number($("#age-2").val()) < 18) {
      return false;
    }
    // Needed in some cases if the user went back (clean up)
    if (currentIndex < 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 && Number($("#age-2").val()) >= 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 && 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"
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate">
  <h3>User</h3>
  <fieldset>
    <input type="checkbox" id="checkbox1" name="checkbox1" />
  </fieldset>
</form>

更新于 2016 年 3 月 22 日

如果我删除下面的代码片段，点击事件就没有问题。

$("[type='checkbox']").bootstrapSwitch();

Answer 1

好的，所以我终于找到了一些解决方案。

而不是

$('#UserForm').on('click', '#checkbox1', function () { console.log('you click me'); });

添加此代码，您将在更改时收到一个事件。

$('#checkbox1').on('switchChange.bootstrapSwitch', function (e, state) {

            if(state){
                        alert("Checked");
                        // Your Code Here

            }else{
                        alert("Not Checked");
                        // Your Code Here

            }

        });

或检查我的整个 HTML

<!Doctype html>
<html>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate">
        <h3>User</h3>
        <fieldset>
            <input type="checkbox" id="checkbox1" name="checkbox1" />
        </fieldset>
    </form>

    <script>
        $(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 > newIndex) {
                    return true;
                }
                // Forbid next action on "Warning" step if the user is to young
                if (newIndex === 3 && Number($("#age-2").val()) < 18) {
                    return false;
                }
                // Needed in some cases if the user went back (clean up)
                if (currentIndex < 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 && Number($("#age-2").val()) >= 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 && 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"
                }
            }
        });

        $('#checkbox1').on('switchChange.bootstrapSwitch', function (e, state) {

            if(state){
                        alert("Checked");
                        // Your Code Here

            }else{
                        alert("Not Checked");
                        // Your Code Here

            }

        });

    </script>
</html>

Bootstrap 窗体向导中未触发切换单击事件

Bootstrap Switch Click Event Not Firing In Form Wizard

jquery

twitter-bootstrap-3

bootstrap-switch