2011-03-29 3 views
3

My jQuery submit() 이벤트가 두 번 발생합니다. 그 이유는 모르겠습니다. 나는 다음과 같이 내가 $(document).ready() 여러 번 호출 결국 동적 그래서 내 HTML을 구축하기 위해 템플릿 엔진을 사용하고jQuery Submit 이벤트가 두 번 발생합니다

...

<script> 
$(document).ready(function() { 
    $("form.search input[type='image']").click(function() { $(this).closest('form.search').submit() }) 
}) 
</script> 

... 나중에 ...

</script> 
$(document).ready(function() { 
    # I have put an `unbind('submit')` in here to be sure I have nothing else but this particular function bound to `submit` 
    $('form.search').unbind('submit').bind('submit',function(event) { 
     event.stopPropagation(); 
     search_term = $(this).find('input[type=text]').val() 
     $new_keyword = $('<li class="filter keyword selected" name="'+search_term+'">'+search_term+'</li>') 
     alert('event fired!') 
     $("#keywords ul").append($new_keyword) 
     do_search_selected() 
     return false; // Stop the form from actually submitting 
    }) 
}) 
</script> 

양식 HTML : 참고로

<form class="search" method="get" action="/search/"> 

    <div> 
     <input id="searchfield"type="text" name="keywords" value="Search" /> 
     <input id="searchbutton" type="image" src="{{ media_url }}images/search.png" /> 
    </div> 
</form> 

(: 언제

내가 이 (가) submit 이벤트를 트리거 그렇지 않으면 버튼을 제출하거나를 입력하거나 클릭 명중 이벤트가 두 번 해고 : 사파리 콘솔 $('form.search').get()이 실행 나는이 [ <form class=​"search" method=​"get" action=​"/​search/​">​…​</form>​ ])

문제를 얻을. <li>이 dom에 두 번 추가되고 alert이 두 번 나타 나기 때문에 이것을 알고 있습니다.

은 범인이 : 내가 처음 $(document).ready 호출에 바인딩 click 이벤트를 주석 처리하면 이벤트가 한 번만 발생

, 예상대로. 첫 번째 코드가 어떻게 이중 이벤트 트리거를 유발할 수 있습니까?

+2

선택기'form.search'가 예상 한 것을 반환하지 않을 수 있습니까? – RSG

+0

또한 바인딩 된 단추 코드를 게시하십시오. 견본 페이지가 있다면 그 페이지에 대한 링크를 넣을 수도 있습니다. – NotMe

+0

제출 단추 또는 양식의 제출 이벤트에 바인드 된 양식 제출이 있습니까? –

답변

6

문제는 첫 번째 $(document).ready() 함수에있었습니다. input[type=image]click 이벤트를 연결하여 내 양식에서 submit 이벤트를 트리거했지만 이미지 입력이 기본적으로 클릭하면 submit이됩니다.

1

양식을 선택하고 기본 제출 핸들러가 표시되지 않도록해야합니다. 나는 비교적 무관 한 오류 (어쩌면 do_search_selected()에 있는가?)가 'return false'에 도달하는 것을 막아서 정상적으로 제출할 수 있도록한다.

편집 그냥 당신에게 마지막 코멘트를 보았다. 선택기, 경고 및 재정의 만 실행하여이를 테스트 할 수 있습니다. 해당 함수에서 AJAX를 비동기 적으로 사용하는 경우 async을 설정해야 할 수 있습니다.

또한 문장 끝에 세미콜론을 추가하십시오!

관련 문제