jeudi 5 janvier 2017

Unable to handle click event on button-ified checkbox in Bootstrap 4

Bootstrap 4 can present checkboxes and their labels to look like buttons. The doc for that can be found here: http://ift.tt/2j7djwE

In the case where checkboxes and labels are presented as such (and not as buttons), handling click events on the input element is easy enough. But once the required CSS classes and attributes are added to present these as buttons, handling the same events is not as trivial. Some code would be in order here:

<!-- The HTML -->
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox
  </label>
</div>

// The JS
jQuery('input[type=checkbox]').click(function() {
  alert('Click!');
});

Here's a not-so-working working example: http://ift.tt/2iI5puw

The intention here is to display a "Click!" alert once the "Checkbox" is clicked. If the "data-toggle" attribute is removed, it works fine (with the exception that the checkbox is still visible). It seems like Bootstrap simply ditches all jQuery-registered event listeners on the checkbox element, which is kind of rude. I know I can listen for click events on the label element instead, but that is not desired for the case I'm working on.

Any ideas how I could get around this?




Aucun commentaire:

Enregistrer un commentaire