Javascript jQuery-hasClass中的按钮会延迟工作

我正在使用引导复选框按钮来创建一个按钮组。 当用户单击其中一个按钮时，它将变为活动状态

我使用下面的函数检查哪个按钮处于活动状态，哪个按钮处于非活动状态，然后在函数的其余部分使用这些数据

正如您在JSFIDLE中看到的，结果是延迟的，如果我将

is

更改为

was

，则结果是正确的。但是我需要在我正在使用的函数中进行测试，而不是在下次调用该函数时

有人能给我解释一下为什么会发生这种情况，以及我的

hasClass

检查对于这种情况是否正确吗

HTML:

---

推特引导自动绑定在

文档

级别工作，这意味着您的

点击
事件在
框
级别仍然不知道按钮状态的变化

您可以删除自动绑定，删除这组复选框的
数据切换
属性，并使用
.button（）
，如中所述

这是因为您的javascript是在引导设置类之前执行的。那么，如果用户单击按钮，我该如何测试？您已经在测试了，但设置类是在您检查之后进行的。你真正需要做的就是推迟它，就像这样->它应该会工作吗？我在哪里可以读到什么是推迟？为什么在这种情况下设置超时有效？使用超时，如何使用在setTimeout中设置的变量？
<div class="box btn-group" data-toggle="buttons-checkbox">
    <button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
    <button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
</div>​

$(".box").on('click', function(){
    alert("a is " + ($("#a").hasClass("active") ? "active" : "not-active"));
    alert("b is " + ($("#b").hasClass("active") ? "active" : "not-active"));
});​

<div class="box btn-group">
    <button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
    <button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
</div>​

$(".box").on('click', '.btn', function(){
    $(this).button("toggle");    
    alert("a is " + ($("#a").hasClass("active") ? "active" : "not active"));
    alert("b is " + ($("#b").hasClass("active") ? "active" : "not active"));
});