jQuery click() firing after Bootstrap click, causing conflicts

Question

I have Bootstrap 3.3.5 (CSS and JS) with jQuery 1.11.0 installed on a page (Fiddle) with a btn-group series of checkboxes. I am trying to bind a jQuery click event to all labels (the buttons) that will count checked inputs and show a validation message if zero are selected.

Additionally, I would like to remove btn-default and add btn-primary for the selected button, so it will stand out in the UI more. This would net having both btn-primary and active classes applied at the same time. However it seems my jQuery click() is firing before the bootstrap click is firing, so my function returns inaccurate data (as far as the user is concerned).

How can I make the jQuery click() event fire after the bootstrap event(s) have finished?

Fiddle here, and thanks!

HTML:

<div class="form-group">
    <label class="control-label col-sm-2 control-label-colon-after" for="Selected_Days">Selected Days</label>
    <div class="col-sm-4">
        <div>
            <div class="btn-group btn-group-justified" data-toggle="buttons" id="dayOfWeekGroup">
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Monday">
                    <input autocomplete="off" id="DayOfWeek_Monday" name="DayOfWeek_Monday" type="checkbox" value="Monday"> Mon
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Tuesday">
                    <input autocomplete="off" id="DayOfWeek_Tuesday" name="DayOfWeek_Tuesday" type="checkbox" value="Tuesday"> Tue
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Wednesday">
                    <input autocomplete="off" id="DayOfWeek_Wednesday" name="DayOfWeek_Wednesday" type="checkbox" value="Wednesday"> Wed
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Thursday">
                    <input autocomplete="off" id="DayOfWeek_Thursday" name="DayOfWeek_Thursday" type="checkbox" value="Thursday"> Thu
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Friday">
                    <input autocomplete="off" id="DayOfWeek_Friday" name="DayOfWeek_Friday" type="checkbox" value="Friday"> Fri
                </label>
                <label class="btn btn-default pcs-weekend" id="lblDayOfWeek_Saturday">
                    <input autocomplete="off" id="DayOfWeek_Saturday" name="DayOfWeek_Saturday" type="checkbox" value="Saturday"> Sat
                </label>
                <label class="btn btn-default pcs-weekend" id="lblDayOfWeek_Sunday">
                    <input autocomplete="off" id="DayOfWeek_Sunday" name="DayOfWeek_Sunday" type="checkbox" value="Sunday"> Sun
                </label>
            </div>
        </div>

        <span id="dayOfWeekGroupValidationErr" class="field-validation-valid text-danger" style="display: none;">At least one day of the week is required to create a schedule block</span>
    </div>
</div>

JavaScript

$('#dayOfWeekGroup label').click(function() {

    // add primary class if button selected, or remove if deselected
    if ($(this).hasClass('active')){
        $(this).removeClass('btn-default').addClass('btn-primary');
    } else {
        $(this).removeClass('btn-primary').addClass('btn-default');
    }

    // count how many buttons are selected, and show a validation error if zero
    if ($('#dayOfWeekGroup').find('input:checked').length > 0) { 
        $('#dayOfWeekGroupValidationErr').hide();
        return true;
    }
    $('#dayOfWeekGroupValidationErr').show();
    return true;
});

score 3 · Accepted Answer · answered Aug 06 '15 at 00:16

3

The problem is where you are checking the checkboxes values, because a click event is fired before the checkbox value changes. To solve the issue you can use the change event instead.

$('#dayOfWeekGroup label').change(function() { ... }

Updated fiddle: http://jsfiddle.net/sk4suevu/3/

answered Aug 06 '15 at 00:16

Johan Karlsson

6,419
1
19
28

exactly what I was looking for! Couldn't see the trees through the forest. Thank you @caeth! – jbwebtech Aug 07 '15 at 19:53

score 1 · Answer 2 · answered Aug 06 '15 at 02:21

You might want to try this:

$('#dayOfWeekGroup input[type="checkbox"]').change(function(){
    var label = $(this).closest("label");

     // add primary class if button selected, or remove if deselected
    if ($(label).hasClass('active')){
        $(this).removeClass('btn-default').addClass('btn-primary');
    } else {
        $(this).removeClass('btn-primary').addClass('btn-default');
    }

    // count how many buttons are selected, and show a validation error if zero
    if ($("#dayOfWeekGroup").find(".active").length > 0) {
        $('#dayOfWeekGroupValidationErr').hide();
        return true;
    }
    $('#dayOfWeekGroupValidationErr').show();
    return true;
});

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

Try adding the bootstrap js (script src) after your js code and not before, like this

<script>
    ... your code
</script>
<script src="/route/to/bootstrap.js">

also you can see this answer jQuery bind event listener before another for a pre-bind solution

edited May 23 '17 at 12:32

Community

1
1

answered Aug 06 '15 at 00:15

jperelli

6,988
5
50
85

jQuery click() firing after Bootstrap click, causing conflicts

3 Answers3