2012-11-20 2 views
2

폼이있는 페이지가 있고 jquery 이벤트 핸들러를 연결하여 키보드에서 Enter 키를 눌러이 폼을 전송하십시오.jquery에서 다중 이벤트 핸들러 키 누르기 처리

//Submit form when enter pressed 
$(document).keypress(function (e) { 
    if (e.which == 13) { 
     $('form').submit(); 
    } 
}); 

동일한 페이지에서 jquery UI 대화 상자()를 사용하여 모달을 표시 할 수도 있습니다. 모달 (대화 상자()가 호출 될 때까지 숨겨진 div입니다)에는 버튼이 있으며 키보드에서 입력 할 때 버튼을 "클릭"할 수있는 기능을 제공하고 싶습니다. 문제는 이전에 내 페이지에서 동일한 이벤트 핸들러를 사용하면 폼을 제출하고 버튼을 클릭하는 것입니다.

두 번째 이벤트 처리기가 모달로 제한되거나 나머지 문서로 전파되지 않도록 처리하려면 어떻게해야합니까? 그 시나리오에서 작동하지 않는 e.stopPropagation을 시도했습니다.

//Handler on the modal 
$(document).keypress(function(e) { 
    e.stopPropagation(); 
    if($('#button-doc-validate').is(':visible') && e.which == 13) { 
     //Click the button 
     $('#button-doc-validate').click(); 
    } 
}); 
+0

을 분리 할 것인가? –

+0

글쎄, 양식이 아니며 keypress에 제출할 수 있기를 원하기 때문에 keypress를 듣지 않고 제출 이벤트를 트리거하는 방법 –

+1

submit 키를 사용하여 양식을 처리하는 경우 (키 입력을 처리 할 것임) .. 다음 keypress 이벤트 처리기를 귀하의 모달에 바인딩하여 두 개의 다른 키 누르기를 분리 할 수 ​​있습니다. http://jsfiddle.net/KMAYv/ –

답변

1

제출을 위해 (당신의 키를 입력 처리되는) ​​.. 당신은 그래서 두 개의 서로 다른 키 누름

$('form').submit(function(){}) //- will handle enter keypress and form submit action 

$('modal').keypress(function(){}); //- will handle the keypress inside the modal 

를 분리하는 모달에 키를 누를 때 이벤트 처리기를 바인딩 할 수 있습니다와 양식을 처리 할 경우 입력 키 누름은 왜 안가 키 누름을 처리하는 대신 양식의 기능을 제출 사용하십시오

는 폼의 경우

http://jsfiddle.net/KMAYv/

0

대답은 간단합니다. 가능한 것으로 파악되지 않았습니다.

난 그냥 문서에 바인딩 대신 모달의 DIV에 키 누르기 이벤트 핸들러를 구속했습니다

//Handler on the modal 
$('#modal-container').keypress(function(e) { 
    if($('#button-doc-validate').is(':visible') && e.which == 13) { 
     //Click the button 
     $('#button-doc-validate').click(); 
     return false; 
    } 
}); 

에만 모달에 발생하고 돌아 오는 전파를 취소 이러한 방법으로 거짓 그렇게 영향을주지 않습니다 보다 일반적인 문서 keypress 핸들러.

관련 문제