button上的Twitter Bootstrap onclick事件
我有一个Twitter Bootstrapbutton收音机，并挂钩onclick事件。 但是，如何检查哪个button被触发？
我的第一个想法是简单地检查“活动”类，但是这应该创build一个竞赛条件（结果取决于Twitter Bootstrap事件或我自己的onclick事件是否首先被处理）。
这是一个非常烦人的。 我最终使用的是这样的：
首先，创build一组没有data-toggle属性的简单button。
<div id="selector" class="btn-group"> <button type="button" class="btn active">Day</button> <button type="button" class="btn">Week</button> <button type="button" class="btn">Month</button> <button type="button" class="btn">Year</button> </div>
接下来，编写一个事件处理程序，模拟单选button效果，方法是“激活”单击button，然后“停用”所有其他button。 （编辑：综合尼克清洁版从评论。）
$('#selector button').click(function() { $(this).addClass('active').siblings().removeClass('active'); // TODO: insert whatever you want to do with $(this) here });
我看到很多复杂的答案，而这在Bootstrap 3中是非常简单的：
第1步：使用官方的示例代码来创build您的单选button组，并给容器一个id：
<div id="myButtons" class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div>
第2步：使用这个jQuery处理程序：
$("#myButtons :input").change(function() { console.log(this); // points to the clicked input button });
尝试小提琴演示
我会使用更改事件而不是像这样的点击：
$('input[name="name-of-radio-group"]').change( function() { alert($(this).val()) })
对于Bootstrap 3 ，默认的radio / button-group结构是：
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Option 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Option 3 </label> </div>
你可以select这样的活动的：
$('.btn-primary').on('click', function(){ alert($(this).find('input').attr('id')); });
不要使用数据切换属性，以便您可以自己控制切换行为。 所以它会避免“种族条件”
我的代码：
button组模板（用.erb编写，ruby在rails上embeddedruby）：
<div class="btn-group" id="featuresFilter"> <% _.each(features, function(feature) { %> <button class="btn btn-primary" data="<%= feature %>"><%= feature %></button> <% }); %> </div>
和javascript：
onChangeFeatures = function(e){ var el=e.target; $(el).button('toggle'); var features=el.parentElement; var activeFeatures=$(features).find(".active"); console.log(activeFeatures); }
一旦button被点击，onChangeFeatures函数将被触发。
我需要为图表做同样的事情，您可以select应该显示的数据的时间段。
所以我介绍了CSS类“btn-group-radio”，并使用了下面的不显眼的javascript单行：
// application.js $(document).ready(function() { $('.btn-group-radio .btn').click(function() { $(this).addClass('active').siblings('.btn').removeClass('active'); }); });
这里是HTML：
<!-- some arbitrary view --> <div class="btn-group btn-group-radio"> <%= link_to '1W', charts_path('1W'), class: 'btn btn-default active', remote: true %> <%= link_to '1M', charts_path('1M'), class: 'btn btn-default', remote: true %> <%= link_to '3M', charts_path('3M'), class: 'btn btn-default', remote: true %> <%= link_to '6M', charts_path('6M'), class: 'btn btn-default', remote: true %> <%= link_to '1Y', charts_path('1Y'), class: 'btn btn-default', remote: true %> <%= link_to 'All', charts_path('all'), class: 'btn btn-default', remote: true %> </div>
查看Twitter Bootstrap页面（ http://twitter.github.com/bootstrap/base-css.html#forms ）上单选button的HTML示例，可以看到每个input都具有唯一的ID属性，即optionsRadios1和optionsRadios2 。
这里包含了相关的HTML示例代码片段以保证完整性：
<div class =“controls”>
<label class =“radio”>
<input type =“radio”checked =“”value =“option1”id =“optionsRadios1”name =“optionsRadios”>
选项一是这样的，一定要包括为什么它是伟大的
</标签>
<label class =“radio”>
<input type =“radio”value =“option2”id =“optionsRadios2”name =“optionsRadios”>
选项二可以是别的东西，select它将取消选项一
</标签>
</ DIV>
所以你可以使用jQuery点击事件，然后使用this引用来查看被点击的HTML元素的id。
$（ '控制 '）。find（' input '）。绑定（' 点击'，函数（事件）{
如果（$（本）.attr（ '身份证'）=== 'optionsRadios1'）{
警报（$（本）.attr（ '身份证'））;
} else {
// ...调用一些其他function
}
}）;
我search了这么多页面：我find了一个美丽的解决scheme。 一探究竟：
git链接
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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> <script> $(function() { $("#my_launch_today_chk").change(function() { var chk = $(this).prop('checked'); if(chk == true){ console.log("On"); }else{ console.log("OFF"); } }); }); </script> </head> <body > <input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small"> </body> </html>
如果你的html类似于这个例子，那么点击事件是在标签上产生的，而不是在input中，所以我使用下面的代码： Html例子：
<div id="myButtons" class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> </div>
这个事件的Javascript代码：
$('#option1').parent().on("click", function () { alert("click fired"); });
