引导开关没有事件

Posted 2023-05-09

【中文标题】引导开关没有事件

【英文标题】：Bootstrap-switch doesn´t event

【发布时间】：2014-07-31 21:07:12

【问题描述】：

我有以下 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类和部分代码）

【参考方案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);
);

【讨论】：

我已将此代码粘贴到我的网络中，但无法正常工作。我启用了 firebug 来检测可能的错误，但找不到任何错误，除了以下错误：错误：方法未退出状态！ localhost/j/jquery-1.9.1.js 第 6 行这是非常罕见的，我不让它工作。复选框从 ON 变为 OFF，但不会触发事件。非常感谢。问候

很好奇，我终于按照他的例子改变了我的文件“bootstrap-switch.min.js”和“bootstrap-switch.css”并为我工作......谢谢@Mr.Cocococo！

【参考方案2】：

试试这个：

获取状态

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

改变

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

【参考方案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>

希望能帮到你！！