* 현상
form 안에 조회조건 input text와 jQuery-UI의 button이 있다.
(form은 onsubmit="return false" 처리되어 있는 상태임)
input text 에 조회조건을 입력하고 엔터키를 입력하니 button에 바인딩된 함수가 실행되었다.-.-;;
keycode == 13 이런 이벤트바인딩을 해 준 것도 아닌데 어떻게 이렇게 된단 말인가!!
* 원인규명
원인을 찾기 힘들었던 이유는 form에 이미 return false가 되어 있기 때문이었다.
위 현상은 다음과 같은 순서로 동작하는 듯 했다.
(1) input text 에서 엔터키 입력 => form submit
(왜 form submit이 발생하는지는 정확히 모르겠다. input이 한 개가 아니어도 동일했다.)
(2) form 안에 있는 jQuery-UI의 button들 중 첫 번째 것의 onclick 이벤트 발생
(왜 이렇게 되는지는 모르겠지만 일단 증상을 밝혀보니 그랬다 -.-;)
(3) form의 onsubmit이 return false 이기 때문에 실제 submit은 일어나지 않았다.
* 해결
해결책 1.
- input text 의 onkeydown 이벤트에 return false를 준다. (공통으로 처리해도 될 듯)
해결책 2.
- jQuery-UI의 <button/>을 form 안에 넣지 않는다.
* 참고
- <button/> 엘리먼트 사용시에는 type 속성을 반드시 선언해야 한다. (ex: type="button")
선언하지 않을 경우, 브라우저마다 버튼에 대해 다른 행동을 보일 수 있기 때문이라고 한다.
(http://www.w3schools.com/tags/att_button_type.asp)
정말 알면 알수록 모르겠구나 ㅎㅎ