Значение кнопки-флажка Twitter Bootstrap изменилось после события click

У меня есть группа кнопок-флажков, подобная этой:

<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 для всех проверенных кнопок, но для события click класс active еще не установлен. Это означает, что когда я впервые нажимаю кнопку, вывод:

>>> 0
>>> false

И в следующий раз, когда я нажму ту же кнопку (т.е. сниму флажок), вывод будет таким:

>>> 1
>>> true

Это означает, что класс active устанавливается после события.

Как я могу получить реальное состояние кнопки во время события click?


jquery twitter-bootstrap jquery-click-event
person augustomen    schedule 05.11.2012    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Если вам очень нужно событие каждый раз, когда класс active добавляется к кнопке, вы можете изменить файл bootstrap.js. active устанавливается/сбрасывается в небольшой функции Button.prototype.toggle, запускаемой кликом, строка 1362-1370:

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"));
});

ИЛИ, если вы считаете, что вышеизложенное слишком грязно, вы можете расширить/изменить Button.prototype (добавив методы, параметры и т. д.), следуя описанному здесь скелету Как расширить плагин Twitter Bootstrap

person davidkonrad    schedule 06.11.2012

arrow_upward
4
arrow_downward

У меня были проблемы с событием клика и временем активного класса!

Продолжая ответ Давидконрада и используя этот пост Я придумал следующее, чтобы избежать необходимости изменять исходный код начальной загрузки, но немного более легкий, чем полное переопределение.

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')
    }
}
person Dave    schedule 11.12.2012

arrow_upward
0
arrow_downward

Вы правильно сделали вывод. Событие клика еще не обновило активный класс, поэтому, когда вы их ищете, оно не возвращается. Нет события, которое инициируется для изменения класса.

Однако то, что вы можете сделать, это добавить setTimout, скажем, 100 мс, достаточное время, чтобы событие щелчка сработало. Обратите внимание, что вам может потребоваться настроить задержку, чтобы разрешить распространение события.

person Kami    schedule 05.11.2012

arrow_upward
0
arrow_downward

Я использовал управление data jQuery для хранения состояния active, переключая его при нажатии кнопки. Тоже не очень красиво, но хоть что-то.

person Patrick Bergner    schedule 26.06.2013