单选按钮 change() 事件仅在使用 $().button('reset') 时触发一次答案

【问题标题】：Radio buttons change() event only firing once when using $().button('reset')单选按钮 change() 事件仅在使用 $().button('reset') 时触发一次
【发布时间】：2014-01-30 14:29:08
【问题描述】：

我创建了一个按钮组，里面有 3 个单选按钮。它们通过使用引导 JavaScript（参见 http://getbootstrap.com/javascript/#buttons）充当切换按钮。我还想在按下按钮时显示加载状态（在执行 Ajax 请求时），所以我使用$().button('loading')。

示例代码：

$(function() {
  $('input[type=radio][name=option]').change(function() {
    var $label = $(this).parent();
    $label.button('loading');

    // Perform Ajax request, simulated with timeout here
    setTimeout(function() {
      $label.button('reset');
    }, 2000);
  });
});

乍一看它可以工作，但是在按下所有按钮一次之后，所有按钮都不会再触发更改事件。这与我正在使用的$().button('reset') 有关，因为在省略之后它可以完美运行。

这是我创建的 JS Bin：http://jsbin.com/etaMURU/2/edit

这是 Bootstrap 错误还是我只是使用了错误的 API？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

可以通过将这些事件委托给输入来修复，因为每次您将按钮状态设置为加载时，它们都会被移除并重新注入到 DOM 中。

$(function() {
  $('.btn-group').on('change', 'input[type=radio][name=option]', function() {
    var $label = $(this).parent();
    $label.button('loading');

    setTimeout(function() {
      $label.button('reset');
    }, 2000);

    console.log('changed');
  });
});

【讨论】：