$() 버튼을 사용하면 라디오 버튼이 한 번만 실행됩니다 ('재설정')

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