Bootstrap-switch不发生事件

Question

我有以下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>

我尝试了以下组合，但无法执行该例程：

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)

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

$('.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)

$('.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)

/*$(".alert-status").click(function(event) {
          event.preventDefault();
          event.stopPropagation();
          alert($(this).attr('data-checkbox'));
});*/

我已经在互联网上搜索过，我查阅过例子，我使用过firebug，但我找不到任何方法来捕捉这个事件。有谁可以帮我？

我找到了这个例子，并在这个环境中进行了修改和工作，而不是在我的网站上：

http://jsfiddle.net/sumw4/13/ (我添加了probeProbe类和部分代码)

Answer 1

我认为你的代码应该能在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：

$('.alert-status').bootstrapSwitch('state', true);


$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {

    alert($(this).data('checkbox'));
    //alert(event);
   // alert(state);
});

Answer 2

试试这个：

获取状态

$('.alert-status').bootstrapSwitch('state', true);

在变化中

$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
 if (state) {
    // true
 } else {
    // false
 }
   event.preventDefault();
});

Answer 3

我在bootstrapSwitch 3上也遇到了同样的问题，所以，在尝试了很多变种都没有成功之后，我决定直接测试代码。毕竟，这是我的解决方案(至少在Chrome下，必须在其他浏览器捆绑包下测试)

有了这个HTML...

<div class="make-switch switch-small"> 
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>

这个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>

希望它能有所帮助！！