jQuery更改事件处理程序是否不用于Bootstrap单选按钮？
[英]jQuery change event handlers not called for Bootstrap radio buttons?
问题描述
没有调用我的Bootstrap单选按钮的jQuery change事件处理程序。 我究竟做错了什么？
请注意，我不想将事件处理程序添加到input或input[type=radio] 。 我想通过ID添加事件处理程序。
要使用的Plunker链接： http ://plnkr.co/edit/Bq30RuT1ypsh1pJk3dxD
$(function(){ $('#listen').change(function(){ log('listen'); }); $('#browse').change(function(){ log('browse'); }); $('#edit').change(function(){ log('edit'); }); function log(str) { let x = $('#log').html(); x += str + '<br/>'; $('#log').html(x); } log('empty'); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Hello Plunker!</h1> <form> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input id="listen" type="radio" autocomplete="off" checked> Listen </label> <label class="btn btn-secondary"> <input id="browse" type="radio" autocomplete="off"> Browse </label> <label class="btn btn-secondary"> <input id="edit" type="radio" autocomplete="off"> Edit </label> </div> </form> <div id="log"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script> </body> </html>
3 个解决方案
解决方案1
1 2016-10-14 19:44:44
请更改此：
<label id="listen" class="btn btn-secondary active">
<input type="radio" autocomplete="off" checked> Listen
</label>
<label id="browse" class="btn btn-secondary">
<input type="radio" autocomplete="off"> Browse
</label>
<label id="edit" class="btn btn-secondary">
<input type="radio" autocomplete="off"> Edit
</label>
解决方案2
0 已采纳 2016-10-14 19:42:26
我认为问题在于该事件未得到处理，因为您单击的是标签标签而不是单击收音机
解决方案3
-2 2016-10-14 19:32:03
问题在于标签会越过单选按钮并拦截单击/更改事件。
这样改变你的html
<form>
<div class="btn-group" data-toggle="buttons">
<input id="listen" type="radio" autocomplete="off" checked> Listen
<input id="browse" type="radio" autocomplete="off"> Browse
<input id="edit" type="radio" autocomplete="off"> Edit
</div>
</form>
并尝试这个
$(document).ready(function(){
$('#listen').click(function(){
log('listen');
});
$('#browse').click(function(){
log('browse');
});
$('#edit').click(function(){
log('edit');
});
});
function log(str) {
let x = $('#log').html();
x += str + '<br/>';
$('#log').html(x);
}
Bootstrap单选按钮“Yes”或“No”没有取消更改或单击事件
[英]Bootstrap radio buttons “Yes” or “No” not picking up change or click event
ng-change事件要求第一次使用ng-repeat创建的单选按钮，但不是第二次
[英]ng-change event called for radio buttons that are created using ng-repeat the first time but not for second time
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.