Javascript mouseup event with toggle buttons in bootstrap - the event fires too early

Question

When a user clicks a button out of a series of buttons, I'd like the browser to be able to detect which buttons are toggled as soon as they've clicked it.

Here's an example: http://jsfiddle.net/Uc6LV/11/

• Try clicking "One" (nothing happens)
• Now click "Two", it will display "one" (the previous one that was clicked

I changed the event listener from click to mouseup but it still seems to fire the event too early.

Any ideas?

Answer 1

In your event listener, I would listen for a "click" event and delay the actual calculation via setTimeout(). This works in your fiddle:

 container.children[i].addEventListener("click", //click is better than mouseup
            function(){
                //let's delay execution until button is toggled
                setTimeout(function() {
                    notice.innerHTML = toggled().toString(); }, 1);
        })