我有一个表单向导，其中包含一个复选框。我正在使用自举开关向用户显示切换按钮。每次用户点击按钮时，它应显示YES或NO（用于选中/取消选中）。但是，除非我执行以下操作之一，否则click事件不起作用：
评论自举开关代码
$("[type='checkbox']").bootstrapSwitch();
使用委托
添加点击事件$（'＃UserForm'）。on（'click'，'＃checkbox1'，function（）{ 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>
于2016年3月23日更新
如果我删除下面的代码段，则点击事件会毫无问题地触发。
$("[type='checkbox']").bootstrapSwitch();
答案 0 :(得分：4)
好的，最后我得到了一些解决方案。
而不是
$('#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>