Question

对于Bootstrap数据切换=＆＃34;切换＆＃34;阻止onClick功能，当我在代码中使用bootstrap切换时，我的默认checkbox onclick功能无效，但当我删除data-toggle="toggle"此功能时，它的工作正常。

＆＃13;

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<body>
  <div>
    <span id="val">value</span>
  </div>
  <div>
    <input id="approval"  type="checkbox" checked data-toggle="toggle" onclick="Approve(this)">
  </div>



  <script>
    function Approve(e) {
	  document.getElementById('val').innerHTML = e.checked;
    }
  </script>

</body>

＆＃13;

任何人都可以帮助我

Answer 1

我遇到了同样的问题。经过一段时间的尝试并阅读了这篇文章。不断变化的作品！

<input id="approval"  type="checkbox" checked data-toggle="toggle" onchange="Approve(this)">

@Mike是正确的，引导程序将覆盖onchange和keyup / down。但是“ onchange（）”成功了！

Answer 2

这种情况很可能是Bootstrap覆盖了元素上的默认事件处理程序。我无法肯定地说，但事实确实如此。

将事件处理程序设置为元素的更好方法是使用javascript addEventListener。从HTML中删除onclick属性，如下所示：

<input id="approval"  type="checkbox" checked data-toggle="toggle">

并使用javascript：

在元素上设置事件处理程序

<script>
document.getElementById('approval').parentNode.addEventListener('click', function(event){
    // the value of `this` here is the element the event was fired on. 
    // In this situation, it's the element with the ID of 'approval'.
    document.getElementById('val').innerHTML = this.querySelector('input').checked
  })
</script>

上面的脚本部分完全替换了脚本标记，因为它直接在事件处理程序中设置了innerHTML。

对于Bootstrap数据切换=＆＃34;切换＆＃34;阻止onClick函数，

2 个答案: