twitter-bootstrap Bootstrap-switch 不发生事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24152240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap-switch doesn′t event
提问by Anto
I have the following html code (working properly changing the state of the checkbox) and I need to run an alert when the state of some checkbox is changed.
我有以下 html 代码（正常工作可以更改复选框的状态），当某些复选框的状态发生更改时，我需要运行警报。
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>
I have tried the following combinations, but I can not execute the routine:
我尝试了以下组合，但无法执行例程：
1)
1)
$('.make-switch.input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
alert(this);
});
2)
2)
$('input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
alert(this);
});
3)
3)
$('.alert-status').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
alert(this);
});
4)
4)
$('.alert-status').on('switchChange', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
alert(this);
});
5)
5)
/*$(".alert-status").click(function(event) {
event.preventDefault();
event.stopPropagation();
alert($(this).attr('data-checkbox'));
});*/
I have searched the internet, I have consulted examples, I have used with firebug, and I find no way to capture the event. Can anyone help me?
我在网上搜索过，我参考过例子，我用过firebug，我找不到捕获事件的方法。谁能帮我？
I found this example and have modified and work in this environment, not on my website:
我找到了这个例子，并在这个环境中进行了修改和工作，而不是在我的网站上：
http://jsfiddle.net/sumw4/13/(I add probeProbe class and portion of code)
http://jsfiddle.net/sumw4/13/（我添加了probeProbe 类和部分代码）
回答by Mr.Cocococo
I think your code should be working http://jsfiddle.net/PNU45/
我认为您的代码应该可以正常工作http://jsfiddle.net/PNU45/
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>
javascript:
javascript:
$('.alert-status').bootstrapSwitch('state', true);
$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
alert($(this).data('checkbox'));
//alert(event);
// alert(state);
});
回答by Bruno Ribeiro
try this :
试试这个 ：
get state
获取状态
$('.alert-status').bootstrapSwitch('state', true);
On change
更改时
$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) {
// true
} else {
// false
}
event.preventDefault();
});
回答by Jonathan Vivero
I've been having the same problem with bootstrapSwitch 3. So, after trying a lot of variants unsuccessfully, I decided to test the code directly. And after all, this is my solution (at least under Chrome, have to test under the other bundle of browsers)
我在使用 bootstrapSwitch 3 时遇到了同样的问题。所以，在尝试了很多变体都没有成功之后，我决定直接测试代码。毕竟，这是我的解决方案（至少在 Chrome 下，必须在其他浏览器包下测试）
having this HTML...
有这个 HTML...
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
this javascript works perfectly for me:
这个 javascript 非常适合我：
<script type="text/javascript">
(function(){
function value1Changed(event, state){
var myNewState = state.value;
}
$('input[data-checkbox="VALUE1"]')
.parent('.make-switch')
.on('switch-change', value1Changed);
});
</script>
Hope it can help!!
希望能帮到你！！
