Question

Why I have to click twice to run a function that uses active class added by Bootstrap buttons plugin?

var monthly = $("input[name='montly_total']");
var once = $("input[name='once_total']");

$(".button-selector").click(function () {
 $(".button-selector.monthly.active").sum("click", monthly);
 $(".button-selector.once.active").sum("click", once)
});

Live example: http://jsfiddle.net/ynts/3Z6sm/. Inputs are updated only on a second click on a button.

Answer 1

Those buttons are a pain to use, because they don’t fire any custom event you can hook your functionality onto.

That said, here’s an ugly setTimeout() workaround:

$(".button-selector").click(function () {
    // break out of click handler chain
    setTimeout(function() {
        // by the time this runs, the active state will have been updated
        $(".button-selector.monthly.active").sum("click", monthly);
        $(".button-selector.once.active").sum("click", once)
    }, 0);
});