Question

我创建了一个按钮组，里面有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？

Answer 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');
  });
});

单选按钮change（）事件仅在使用$（）。按钮（'reset'）时触发一次

1 个答案: