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?