I am new to BootstrapToggle and I am using Bootstrap toggle button inside an anchor tag like this :
Here is the code snippet :
<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>
Now If I toggle the button the anchor tag alert also gets called. I want only my button to be toggled If I change it not the anchor tag alert should be called in that case.
Any help would be appreciated.
Instead of this:
<a onclick="alert('hello'); return false;">
use
<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>
我建议您使用,因为我遇到了同样的问题。
<a href="javascript:void(0);">
It is a strange solution to wrap the button with the anchor, but if this is what you want...
You can try something like that
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.