當使用$（）。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'); 
    }); 
});