No JavaScript event firing for Boostrap 5 button group

Question

Correct me if I'm wrong, but it seems like the button group in Bootstrap 5 does not fire an event on click or change anymore? How would you detect change in JavaScript, preferably? In Boostrap 3, we've used $('.btn-group').on('change', ...).

See code: https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups

Copy-pasted from manual:

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Please edit your question and add in the relevant code segment (the link is ok, but we need the code segment in the question itself). — devlin carnate, Apr 19 '22 at 16:16
You have no `button-group-div` class in your code segment. Have you tried binding to `btn-check` class? — devlin carnate, Apr 19 '22 at 16:18
What problem are you trying to solve? It's usually better to ask about _that_. — isherwood, Apr 19 '22 at 16:20
Funny enough, when clicking on the button group on the manual, there's no change in the HTML. The `checked` prop is always on the first button. Is that by design? — Olle Härstedt, Apr 19 '22 at 16:21
@isherwood We're converting from Bootstrap 3 to 5, and we show/hide elements based on button group clicking. — Olle Härstedt, Apr 19 '22 at 16:21
Then it sounds like you need to bind your event to the class on the div...`btn-group` — devlin carnate, Apr 19 '22 at 16:28
Actually, the event _is_ triggered, I see now. I was editing the wrong file! Classic. I voted to close. Sorry for wasting anyone's time... — Olle Härstedt, Apr 19 '22 at 16:30

score 1 · Accepted Answer · answered Apr 19 '22 at 16:30

Bootstrap doesn't fire an event, but the radio group does. Attach change listeners to the radio group inputs...

const myHandler = (event) => {
     alert('Radio with ID = ' + event.target.id);
}

document.querySelectorAll("input[name='btnradio']").forEach((input) => {
    input.addEventListener('change', myHandler);
})

Demo

No JavaScript event firing for Boostrap 5 button group

1 Answers1