jQuery UI의 버튼()이 있는 페이지에서 input text에 엔터키를 입력했을 때 form 내의 첫번째 버튼이 클릭되어 함수가 실행되는 경우

By | 7월 23, 2012

* 현상

   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)

정말 알면 알수록 모르겠구나 ㅎㅎ

   

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments