jquery引入bootstrap.button.js组件后，事件执行顺序的问题

Question

我想实现这样一个效果：点击按钮组中的按钮，获得按钮组中的哪些按钮被选定。
看到bootstrap中实现了这样的效果，所以引入了bootstrap.botton.js这个插件，使用on绑定按钮选择选中的按钮（选定后包含有active属性），但是每次获得的都是上一次点击的按钮值。

例如第一次点击“严重”按钮，第二次再点击“警告”按钮，第二次只能获得“严重”按钮的状态。

 <div class="btn-group alarm-priority" data-toggle="buttons-checkbox">
      <button type="button" id="alarm_condition_error" class="btn btn-small btn-danger alarm-search-condition active">严重</button>
      <button type="button" id="alarm_condition_alert" class="btn btn-small btn-warning alarm-search-condition active">警告</button>
     <button type="button" id="alarm_condition_warn" class="btn btn-small btn-success alarm-search-condition active">提醒</button>
        </div>

var alarmConditions = new Array();
function getAlarmConditions() {
    alarmConditions.splice(0,alarmConditions.length);
    $(".alarm-condition .alarm-search-condition").each(function(i,element){
        if($(element).hasClass("active")){
            alarmConditions.push(i);
        }
    });
}

$(".alarm-search-condition").on('click',function(){
    setTimeout(function(){ //因为事件的执行顺序问题,暂时这样解决
        getAlarmConditions();
    }, 500);
});
        

加上定时器，延迟click事件后，则每次都可以获取当前操作的按钮值。
不知道不加定时器的方式能否解决这个问题？

Answer 1

不知道 jquery.button.js 有没有控制 .active 的切换，不过可以自己写

https://jsfiddle.net/55f48vwx/

$(".alarm-search-condition").on('click',function(e){
    $(this).toggleClass("active");  // 注意这里
    alarmConditions = [];    // 不需要用 splice 去清空，直接赋个空数组简单些
    $(".alarm-condition .alarm-search-condition").each(function(i, element){
        if($(element).is(".active")){
            alarmConditions.push(i);
        }
    });
    console.log(alarmConditions);    // 查看结果
});

Answer 2

一个按钮绑定再多的回调函数，每一个回调函数输入值都是不能被改变的
所以你的问题和执行顺序没有关系~~~

$(".alarm-search-condition").on('click',function(event){
    var clickedButtonDOM=$(this)[0]; 
    //var clickedButtonDOM=event.target;
    //这个clickedButtonDOM 就是你点击的按钮
});