jquery - 如何将 JQuery 单击事件处理推迟到 Twitter Bootstrap 处理程序运行之后

Question

所以，我有一个按钮组.tl，在.tl内部我有按钮label.btn，当它被点击时，它的作用就像一个复选框。

Bootstrap 做到了这一点，因此当选中该复选框时，label 将获得一个active 类。

所以，我想在用户单击其中一个按钮时运行一个函数，并将所有事件标签的文本放入一个数组中。

但是，该函数始终返回最后一个点击事件的结果。我尝试使用 $(".tl").show().delay(100) 但它仍然将所有最后的事件项目返回到数组中。如何修复？

我的问题是我的脚本运行速度比 Bootstrap 更快，即使放置 .active 类

HTML:

<div class="btn-group tl">
    <label class="btn active">
        <input type="checkbox" checked> Option 1 Checked
    </label>
    <label class="btn">
        <input type="checkbox"> Option 2 Unchecked
    </label>
</div>

JS:

$(".tl").click(function() {
    var returningArray = [];
    $(".tl label.active").each(function () {
        returningArray.push($(this).find("span").text());
    });
});

示例:

Action(No.) || initial |   1*  |   2   |   3^  |
------------++---------+-------+-------+-------+
Active Label||  1 2 3  |  2 3  |   3   |  1 3  |
------------++---------+-------+-------+-------+
Array+      ||    X    | 1 2 3 |  2  3 |   3   |

*Clicked button(checkbox) 1 to disable
^Clicked button(checkbox) 1 to enable
+Always returning previous result

附注附带问题:另外 $(".tl label").click(function() { 不起作用，如何更精确？

附注2:另外，我不一定需要解决上述问题，可以建议任何其他方式来实现我的目标

Answer 1

问题在于您怀疑 Bootstrap 方法在脚本之后执行...

一个困惑的解决方案是将处理程序绑定(bind)到文档对象，以便您的处理程序将在 Bootstrap 之后执行。

$(document).on('click', ".tl", function() {
    var returningArray = [];
    $(".tl label.active").each(function () {
        returningArray.push($(this).find("span").text());
    });
});