The toggle button group in the form below utilizes Bootstrap and checkboxes. I am looking to track click events on the checkbox inputs.
<html>
<head>
<title>Example: Bootstrap toggle button group</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
</head>
<body>
<form role="form" id="form">
<div class="form-group">
<div>
<div>
<label for="fname">Name:</label>
</div>
<div id="fname" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
a
<input type="checkbox" value="a" name="fname">
</label>
<label class="btn btn-primary">
b
<input type="checkbox" value="b" name="fname">
</label>
<label class="btn btn-primary">
c
<input type="checkbox" value="c" name="fname">
</label>
</div>
</div>
</div>
</form>
<script type="text/javascript">//<![CDATA[
$(function() {
$('#fname input').click(function() {
console.log('you clicked '+$(this).attr('value'))
});
});
//]]></script>
</body>
</html>
To demonstrate this, I have added a listener that displays the checkbox value once selected:
$(function() {
$('#fname input').click(function() {
console.log('you clicked '+$(this).attr('value'))
});
});
In a test environment like (JSFiddle), this works as intended - triggering the handler prints the checkbox value to the log with each selection.
However, upon running the page locally and making selections, the event doesn't fire, resulting in no output to the console. What could be causing this? The document matches the one from JSFiddle within an iframe, and has been tested on Chrome (v85) and Firefox (v78.0.2) without success.
Note: There's a 404 error linked to the result-light.css stylesheet during page load, but it seems inconsequential when removed.
Emphasizing the need to capture click events specifically, as opposed to using on('change'.
Note: It appears that Bootstrap styles the checkbox inputs with pointer-events: none;, potentially impacting the responsiveness of the click handler to browser queries. Attempts to switch this property to initial or inherit yielded no effects.
EDIT: Closing this inquiry since the issue stemmed from an oversight on my end. Upon review, realized that the browser script depended on Bootstrap 3.4.1 while JSFiddle utilized version 4.4.1.
It's likely that the reason for the lack of response in the browser was due to a segment called the Button data-API section available in Bootstrap 3.4.1's source code:
// BUTTON DATA-API
// ===============
if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) {
// Prevent double click on radios, and the double selections (so cancellation) on checkboxes
e.preventDefault()
// The target component still receive the focus
if ($btn.is('input,button')) $btn.trigger('focus')
else $btn.find('input:visible,button:visible').first().trigger('focus')
}
This portion prevents double clicks on radios and multiple selections for checkboxes, absent in v4.4.1. Excluding this snippet from v3.4.1's source reestablishes expected functionality of the click handler.
If sticking with v3.4.1 is necessary, switching from click to focus will suffice, given radios and checkboxes retain focus. Refer to this JSFiddle for a demonstration.