twbs/bootstrap

change event not working with BS4 radio button groups?

Closed this issue · 7 comments

tim-peterson commented

Bootstrap v4 issue:

For the button group radios I can't get the input:radio change event to fire, so developers looking to do things like $('input').on('change', function ( //do something ) }); could get frustrated. This might not be BS4's fault per se, but just something that works in BS3 and may confuse people.

cvrebert commented

You're referring to http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons , correct?
We're still in the process of overhauling that widget to just use CSS sibling selectors instead of JavaScript.

tim-peterson commented

@cvrebert Thanks, yes the BS v4 radio button groups. A CSS-only solution would be awesome, though I'd imagine many people would still want to use the jQuery change event, which is what seems to be busted.

Is it possible the BS v4 button JS widgets are blocking events (e.preventDefault?) such that change doesn't fire? Clicking the buttons does toggle the radio checked attributes so their essential function still works, but having the JS such that it doesn't prevent change events from firing seems valuable to preserve too.

cvrebert commented

Is it possible the BS v4 button JS widgets are blocking events (e.preventDefault?)

Quite probably.
A pure-CSS solution wouldn't suffer from that problem.

tim-peterson commented

Perfect, thanks again! I don't know the etiquette so feel free to close this issue if that's what you typically do.

tomas-marik commented

Hi there,

I've just got stucked on this issue too. Problem seems to be in code part where "change" event being triggered in Button class:

if (triggerChangeEvent) {
      input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
      $(this._element).trigger('change');
}

this._element points to LABEL so change event is not triggered on INPUT but instead on a wrapping LABEL element.

mdo commented

I believe this is a dupe of #16673? Problem sounds super similar with how the events are being handled for the input and label combo. See #16673 (comment).

alexventuraio commented

Hey there!
Has the issue being fixed? Because I still having it on Bootstrap v4.1.1. This is my example for reference.
The radio inputs do not get the checked attribute when clicking on them.