将 Click 事件附加到 Bootstrap 切换单选按钮
Attaching Click event to Bootstrap Toggle Radio Buttons
我有一个 boostrap 开关,代码如下。视觉效果不错
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="showBuildQuantity" autocomplete="off" checked>Build Quantity
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="showNumberOfScreens" autocomplete="off" onclick="showBuildQuantity()">Number of Screens
</label>
</div>
下面我有一些代码来处理点击事件:
$(document).ready(function () {
$('#showBuildQuantity').on('click', function () {
<code here>
});
$('#showNumberOfScreens').on('click', function () {
<code here>
});
});
我遇到的问题是,当我单击切换按钮时,单击事件永远不会 运行。
我在同一页面上有其他按钮使用相同类型的 jQuery 单击事件,它们没有问题。
经过一些研究,我发现我需要使用 change 而不是 click。所以代码应该是这样的:
$('#showBuildQuantity').on('change', function () {
if (myChart != null) {
myChart.destroy();
}
setChart(getBuildQuantityData);
});
$('#showNumberOfScreens').on('change', function () {
if (myChart != null) {
myChart.destroy();
}
setChart(getNumScreensData);
});
我有一个 boostrap 开关,代码如下。视觉效果不错
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="showBuildQuantity" autocomplete="off" checked>Build Quantity
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="showNumberOfScreens" autocomplete="off" onclick="showBuildQuantity()">Number of Screens
</label>
</div>
下面我有一些代码来处理点击事件:
$(document).ready(function () {
$('#showBuildQuantity').on('click', function () {
<code here>
});
$('#showNumberOfScreens').on('click', function () {
<code here>
});
});
我遇到的问题是,当我单击切换按钮时,单击事件永远不会 运行。
我在同一页面上有其他按钮使用相同类型的 jQuery 单击事件,它们没有问题。
经过一些研究,我发现我需要使用 change 而不是 click。所以代码应该是这样的:
$('#showBuildQuantity').on('change', function () {
if (myChart != null) {
myChart.destroy();
}
setChart(getBuildQuantityData);
});
$('#showNumberOfScreens').on('change', function () {
if (myChart != null) {
myChart.destroy();
}
setChart(getNumScreensData);
});