form의 값이 두 번 전송되는 경우

얼마전 jQuery를 이용하여 폼의 값을 ajax방식으로 처리하는 코드를 작성했는데 폼의 값을 넘기면 두 개의 레코드가 등록되는 문제가 발생한 적이 있다. submit 버튼이 두번 클릭돼서 그런가 싶어 한번 클릭하면 disabled 시켜보기도 했는데 마찬가지 결과가 나왔다. ajax 방식이 아닐 때는 문제가 생기지 않는 걸로 봐서 ajax 관련 코드가 문제인 걸로 파악하고 내가 제일 잘하는 것.. 무한 삽질을 시작했다.

이미지출처 : http://sketchpan.com/?sumin000=244087

몇가지 코드를 바꿔가면서 테스트를 해보니까 jQuery live를 이용해 submit 핸들러를 처리한 것이 문제였다. 폼을 포함한 페이지를 ajax 데이터 로딩 목적으로 사용하기 때문에 나름 생각해서 live를 사용했는데 그게 문제였다. 폼을 포함한 페이지에 jQuery 코드가 포함되어 있기 때문에 live를 사용할 이유가 전혀 없는데 나의 쓸데없는 생각이 이 삽질을 하게 만들었다. 결국 live를 제거하니까 아무 문제없이 폼 전송이 되더라.. 휴~