我是BootstrapToggle的新手,我在锚标签中使用Bootstrap切换按钮,如下所示:
以下是代码段:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<a onclick="alert('hello'); return false;">
<span>Hello World</span>
<input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
</a>
&#13;
现在如果我切换按钮,也会调用锚标记警报。我只想要我的 要切换的按钮如果我改变它,那么在那种情况下不应该调用锚标记警报。
任何帮助都将不胜感激。
答案 0 :(得分:1)
而不是:
<a onclick="alert('hello'); return false;">
使用
<a href="javascript:void(0);">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<a href="javascript:void(0);">
<span>Hello World</span>
<input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
</a>
&#13;
答案 1 :(得分:1)
我建议你使用,因为我遇到了同样的问题。
<a href="javascript:void(0);">
答案 2 :(得分:0)
使用锚包装按钮是一个奇怪的解决方案,但如果这是你想要的......
你可以尝试类似的东西
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<a href="javascript:void(0);">
<span id="MySpan">Hello World</span>
<input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
</a>
<script>
$('#MySpan').click(function() {
alert('hello world');
});
</script>