单击事件后，Twitter Bootstrap Checkbox-Button值更改

Question

我有一个复选框按钮：

<div class="btn-group" id="id_group" data-toggle="buttons-checkbox">
  <button class="btn myclass" type="button" data-value="0">Value 0</button>
  <button class="btn myclass" type="button" data-value="1">Value 1</button>
</div>

和JS事件处理程序：

$(".myclass").click(function(event) {
  console.log($(".myclass.active").length);
  console.log($(this).hasClass("active"));
});

我想获得所有检查按钮的data-value，但是在单击事件上，尚未设置active类。这意味着，当我第一次单击按钮时，输出为：

>>> 0
>>> false

下次我单击相同的按钮（即取消选中）时，输出为：

>>> 1
>>> true

这意味着事件发生后正在设置active类。

在>单击事件期间，如何获得按钮的真实状态？

Answer 1

我也有点击事件和活动类的时间遇到问题！

促进戴维·康拉德（Davidkonrad）的答案并使用这篇文章，我提出了以下内容，以避免不得不修改自举源，但比完整的覆盖物更轻巧。

var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function () {
    _old_toggle.apply(this);
    if (this.$element.hasClass('active')) {
        this.$element.trigger('active')
    }
}

Answer 2

如果您每次将active类都添加到按钮时拼命想要一个事件，则可以修改Bootstrap.js。active是在单击，第1362-1370行触发的小函数Button.prototype.toggle中设置/未设置的：

Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
    $parent && $parent
      .find('.active')
      .removeClass('active')
    this.$element.toggleClass('active')
  }

将其更改为

Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
    $parent && $parent
      .find('.active')
      .removeClass('active')
    this.$element.toggleClass('active')
    if (this.$element.hasClass('active')) {
        this.$element.trigger('active')
    }
  }

现在您有一个活动可以绑定到.myclass

$(".myclass").on('active', function() {
  console.log($(".myclass.active").length);
  console.log($(this).hasClass("active"));
});

或，如果您认为上述太脏了 - 您可以按照此处描述的骨架进行延伸/修改按钮。

您已经正确推导了。点击事件尚未更新活动类，因此，当您搜索它们时，它不会返回。没有触发班级更改的事件。

但是，您可以做的是添加一个 setTimout，100ms，足够的时间允许点击事件触发。请注意，您可能需要调整延迟以允许事件传播。

我使用jQuery的data管理存储active状态，将其切换在按钮点击上。也不是很好，但这是什么。