当使用$（）。button（'reset'）时，单选按钮更改（）事件只触发一次。

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斌我创建：http://jsbin.com/etaMURU/2/edit

那是一个引导错误还是我简单地使用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'); 
    }); 
});