2012-11-20 97 views
2

我有一个页面,我有一个窗体,我附上一个jQuery事件处理程序,通过按下键盘上的回车键来提交此表单。在jquery上处理多个事件处理程序keypress

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

我也有可能在同一页面上显示使用jquery ui dialog()的模态。在模式(这是一个隐藏的直到对话框()被调用))有一个按钮,我也想让用户能够点击按钮,当他点击键盘上的输入。我遇到的问题是如果我在页面上使用与先前相同的事件处理程序,它将同时提交表单并单击该按钮。

我该如何处理这个问题,以便第二个事件处理程序仅限于模态/不传播到文档的其余部分?我试过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

那么模式不是一种形式,我怎么才能触发提交事件,而不用听按键,因为我想能够在按键上提交 –

+1

如果你用for提交表单(它将处理你的输入键) ..然后你可以绑定你的模式上的按键事件处理程序来分离两个不同的按键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; 
    } 
}); 

这样,它触发仅在模式并取消传播返回false,所以不影响更一般的文档宽按键处理程序。