I have a boostrap toggle with the code below. It is visually working right

<div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="options" id="showBuildQuantity" autoplete="off" checked>Build Quantity
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="showNumberOfScreens" autoplete="off" onclick="showBuildQuantity()">Number of Screens
        </label>
    </div>

Below it I have some code to handle click events:

$(document).ready(function () {
    $('#showBuildQuantity').on('click', function () {
        <code here>
    });

    $('#showNumberOfScreens').on('click', function () {
        <code here>
    });
});

The issue I am having is that the click event's are never run when I click the toggle buttons.

I have other buttons on the same page using the same kind of jQuery click event and they do not have an issue.

I have a boostrap toggle with the code below. It is visually working right

<div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="options" id="showBuildQuantity" autoplete="off" checked>Build Quantity
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="showNumberOfScreens" autoplete="off" onclick="showBuildQuantity()">Number of Screens
        </label>
    </div>

Below it I have some code to handle click events:

$(document).ready(function () {
    $('#showBuildQuantity').on('click', function () {
        <code here>
    });

    $('#showNumberOfScreens').on('click', function () {
        <code here>
    });
});

The issue I am having is that the click event's are never run when I click the toggle buttons.

I have other buttons on the same page using the same kind of jQuery click event and they do not have an issue.

• javascript
• jquery
• twitter-bootstrap-3
• jquery-2.0

• What is the question ? – Rayon Commented Jul 28, 2016 at 19:39
• @Rayon Thanks! I added it, the issue is that the .on events never fire and the functions are never called. – Ben Hoffman Commented Jul 28, 2016 at 19:58
• What is the output of console? Are there any errors? Normally your code seems to work as shown in this codePen so try to add more info codepen.io/kmlzjc/pen/oLrvxq – Kamil Zajac Commented Jul 28, 2016 at 20:06
• @Kamil Zajac, yes, I have jQuery 2.2.4 and the latest version of bootstrap. It might be an issue caused by the 2 interacting. – Ben Hoffman Commented Jul 28, 2016 at 20:08

1 Answer 1

After some research I found I need to use change instead of click. So the code should look like this:

$('#showBuildQuantity').on('change', function () {
    if (myChart != null) {
        myChart.destroy();
    }
    setChart(getBuildQuantityData);
});

$('#showNumberOfScreens').on('change', function () {
    if (myChart != null) {
        myChart.destroy();
    }
    setChart(getNumScreensData);
});