对于Bootstrap data-toggle="toggle“阻止onClick功能，
对于Bootstrap data-toggle="toggle“阻止onClick功能，
提问于 2017-06-03 03:15:27
对于Bootstrap data- onClick =“toggle”阻止切换函数，当我在代码中使用bootstrap切换时，我的默认checkbox onclick函数不起作用，但当我删除data-toggle="toggle"这个函数时，它工作正常。
<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>
任何人都可以帮助我
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-03 03:25:12
这种情况很可能是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。
Stack Overflow用户
发布于 2019-06-13 04:32:51
我遇到了同样的问题。在尝试了一段时间并阅读了这篇文章之后。onchange成功了！
<input id="approval" type="checkbox" checked data-toggle="toggle" onchange="Approve(this)">@Mike是对的，bootstrap正在覆盖onchange和keyup/down。但是'onchange()‘做到了！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44335960
复制相关文章
相似问题