Getting active buttons in button-group (bootstrap)

Question

I have a button group and am willing to update some other field on change according to the active buttons. See the jsfiddle here

This is the HTML, copied from the documentation:

<div class="btn-group arrActiviteit arrUpdate" data-toggle="buttons">
    <label class="btn btn-primary active" data-wat='foo'>
       <input type="checkbox"> Item 1
    </label>
    <label class="btn btn-primary" data-wat='bar'>
       <input type="checkbox"> Item 2
    </label>
    <label class="btn btn-primary" data-wat='something'>
      <input type="checkbox"> item 3
    </label>
    <label class="btn btn-primary" data-wat='orElse'>
      <input type="checkbox"> item 4
    </label>
</div>

The Button row acts like it should do.
Then I watch for a click event on the .arrUpdate div for change. I've got multiple button groups which all have the .arrUpdate class. That's the reason for the second class: .arrActiviteit

$('.arrUpdate').click(function(e){
   val = ''; // for holding the temporary values

   $('.arrActiviteit label').each(function(key, value){
       if(value.className.indexOf('active') >=0){
           val += value.dataset.wat
       }
   })

   // just for debug reasons.
   $('#hierHier').html(val); 

})

But it appears that the 'active' class gets added after the click event is fired. So the value in #hierHier is always behind one click, so to say.

How can I resolve this?
Or is there a better way to retrieve all the active buttons in this checkbox-array?

Answer 1

SOLVED

---

update: better solution Twitter Bootstrap onclick event on buttons-radio

---

http://jsfiddle.net/hA423/7/

I solved it using a timeout to make your function run after bootstrap events...

There must be some other ways to do it...

$('.btn').on('click',function(e){
  setTimeout(count);
})