文章/答案/技术大牛

发布

社区首页 >问答首页 >引导开关单击事件在窗体向导中未触发

问引导开关单击事件在窗体向导中未触发
EN

Stack Overflow用户

提问于 2016-03-18 14:36:33

回答 1查看 2.8K关注 0票数 2

我有一个表单向导，其中有一个复选框。我使用引导开关显示一个切换按钮给用户。每次用户单击按钮时，它都应该显示是或否(用于检查/取消检查)。但是，除非我执行以下操作之一，否则单击事件无法工作：

删除向导，引导开关按钮将按预期工作。
注释引导开关代码 $("[type='checkbox']").bootstrapSwitch();
使用委托添加单击事件 $(‘#UserForm’).on(‘单击’，‘#checkbox1 1’，函数() {console.log(‘您单击我’)；}；

$(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>

更新于03/22/16

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

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

jquery

twitter-bootstrap-3

bootstrap-switch

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-25 04:49:30

好的，最后我找到了一些解决办法。

而不是

$('#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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36087116

复制

相似问题

问引导开关单击事件在窗体向导中未触发
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导开关单击事件在窗体向导中未触发EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导开关单击事件在窗体向导中未触发
EN