javascript - jQuery 单选按钮更改

Question

因此，我在此处和其他地方查看了如何在单击单选按钮时使用 jQuery 执行函数。我可以使示例代码独立工作，就像在 CodePen 中一样，但在集成到我的项目中时它将无法工作。

我没有使用直接的单选按钮，而是使用 Bootstrap 化的按钮。表单的相关部分最终看起来像这样:

<div class="btn-group" data-toggle="buttons" role="group" id="floors-div">
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="1" value="1" autocomplete="off">1</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="2" value="2" autocomplete="off">2</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="3" value="3" autocomplete="off">3</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="4" value="4" autocomplete="off">4</label>
</div>

当单击按钮时，我可以通过以下方式执行操作:

$("input[name='floors']").parent().click(function() {
...snip...
var buttonVal = $("input[type='radio'][name='floors']:checked").val();

但是这个值是错误的。它返回先前选择的按钮的值，而不是当前按钮的值。如果我只是做类似的事情:

$("input[name='floors']").change(function() {
...snip...

单击按钮后没有任何反应。

有什么建议吗？

编辑:在您的帮助下，我已经缩小了问题的范围。事实证明，我所做的 CodePen 和生产环境之间的主要区别在于包含了 Bootstrap 的 JS。显然他们正在重写一些与 .change 方法混淆的东西。问题在 CodePen here 中重现.

编辑2:如果重要的话，我的所有 JS 也都在 $(document).ready(function(){ 内。

Answer 1

尝试使用event delegation这样.

 $("#floors-div").on("change", "input[name='floors']", function () {
        //code snippets
 });

或者

$(document).on("change", "input[name='floors']", function () {
        //code snippets
 });