HTML로드 상태는 하나의 버튼에서만 작동합니다.

Question

부트 스트랩과 함께 작업하고로드 상태가 "효과"인 버튼을 몇 개 추가하고 싶습니다. 하지만 문제는 하나의 버튼으로 만로드 상태가 작동한다는 것입니다. 아무도 나에게 이유를 설명 할 수 있고, 나에게 실제 사례를 보여줄 수 있습니까?

HTML :

<td> 
    <input type="button" id="fat-btn" data-loading-text="Einschalten..." class="btn btn-success" onclick="l1_on();" value= "einschalten" /> 
    <input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="btn btn-danger" onclick="l1_off();" value= "ausschalten" /> 
</td> 

JS : 하나 개의 요소를 반환에

$('#fat-btn') 
    .click(function() { 
    var btn = $(this) 
    btn.button('loading') 
    setTimeout(function() { 
     btn.button('reset') 
    }, 3000) 
    }) 

Answer 1

ID가 예상된다. 클래스 이름

시도, 그것은 예를 들어 다른 클래스를 추가, 더 맞습니다 '로드 할 수있는'트릭을 할 것입니다 :

<input type="button" id="fat-btn" data-loading-text="Einschalten..." class="loadable btn btn-success" onclick="l1_on();" value= "einschalten" /> 
    <input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="loadable btn btn-danger" onclick="l1_off();" value= "ausschalten" /> 

$('.btn.loadable') 
     .click(function() { 
     var btn = $(this) 
     btn.button('loading') 
     setTimeout(function() { 
      btn.button('reset') 
     }, 3000) 
     }); 

나는 ID 문서에 속성을 반복하지 않는 것이 좋습니다 것입니다.

Answer 2

당신은 같은 btn 클래스를 사용하여이 작업을 수행 할 수 있습니다 클래스에

$('.btn').click(function() { 
    var btn = $(this); 
    btn.button('loading'); 
    setTimeout(function() { 
     btn.button('reset') 
    }, 3000); 
});