在jquery上处理多个事件处理程序按键

I have a page in where I have a form and I attach a jquery event handler to submit this form by hitting enter on the keyboard.

我有一个页面,我有一个表单,我附加一个jquery事件处理程序,通过按键盘输入提交此表单。

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

I also have the possibility to show a modal using jquery ui dialog() on the same page. In the modal (which is a hidden div until dialog() is called) there is a button and I would like also to give the user the ability to "click" the button when he hits enter on the keyboard. The problem that I have is if I use the same event handler than previously on my page it will both submit the form and click the button.

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

How can I handle this so the second event handler is limited to the modal / do not propagate to the rest of the document ? I've tried e.stopPropagation which is not working in that scenario.

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

2 个解决方案

#1

If you handle your form with the for submit(which will handle enter keypress for you).. then you can bind keypress event handler on your modal to separate the two different keypresses

如果您使用for submit处理表单(将为您处理输入按键)..那么您可以在您的模态上绑定keypress事件处理程序以分隔两个不同的按键

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

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

So the enter keypresses will be separated

因此输入按键将被分开

http://jsfiddle.net/KMAYv/

#2

The answer is simple I juste didn't figure out that was possible.

答案很简单我juste没有想到这是可能的。

I've just bound the keypress event handler on the modal's div instead of binding it to the document :

我刚刚在modal的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;
    }
});

This way it fires only on the modal and cancel the propagation returning false so do not affect the more general document wide keypress handler.

这样它只在模态上触发并取消传播返回false,因此不会影响更通用的文档宽按键处理程序。

#1