JQuery - <button>을 사용할 때 페이지가 재설정되지만 <input type = "button"으로 잘 작동합니다.

Question

어제이 페이지에서 작업하고 있었고 JQuery에서 이상한 동작을 발견했습니다. 아래 양식의 경우 페이지에서 결과를 올바르게로드 한 다음 나중에 몇 초를 기본 상태로 새로 고칩니다.

나는 또한 내가

$('#validateScore').on('click', function(){ 
    var scoreInput = Number($("#score").val()); 

... 
... 
... 

if(tempScore != scoreInput){ 
    $("#answer").html("<p id='#result'>Invalid Score</p>"); 
} 
    else{ 
     $("#answer").html("<p id='#result'>Valid Score</p>"); 
    } 
}); 

가이 어떤 종류인가 (크기를 저장하기 위해 몸을 제거) JQuery와 버전 1.10.2

<form id="scoreCheck"> 
    <p> 
     <label for="score">Score:</label> 
     <input type="text" id="score" /> 
    </p> 
    <p> 
     <input type="button" id="validateScore" value="Check it" /> 
    </p> 
    <p id="answer">The result will go here when the button is pressed.</p> 
</form> 

그리고 JS/JQuery와 기능을 사용하고주의해야한다 버그 또는 단추 요소와 상호 작용할 때 JQuery를 잘못 사용 했습니까? 감사!

Answer 1

이 일어나는 것을 중지해야합니다

$('#validateScore').on('click', function(e){ 
    e.preventDefault(); 
    var scoreInput = Number($("#score").val()); 

Answer 2

버튼이 양식 내에있는 경우 기본 비헤이비어는 submit입니다. 그리고 유형을 지정하면 정상적인 버튼처럼 동작합니다.

Answer 3

u는 입력 형식을 사용할 때 이유는 뒤에 = '버튼'은 =하여 입력 유형에서 그것을 diffrentiating하는, 일을 '제출'것을 볼 수있는 예 : < 버튼>이 기본 동작은 양식 내부에 < 버튼 또는 입력 유형 = 제출 버튼을 사용하여 수행하려면이 기본 동작을 방지해야합니다.

http://api.jquery.com/event.preventdefault/