Handling multiple event handler keypress on jquery

Question

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.

//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.

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.

//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();
    }
});

If it's a form, why not use the submit function of the form instead of handling the keypress? — wirey00
– wirey00, Commented Nov 20, 2012 at 14:35
Well the modal is not a form and how can I trigger the submit event without listen to the keypress because I want to be able to submit on keypress — Arno 2501
– Arno 2501, Commented Nov 20, 2012 at 14:38
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 jsfiddle.net/KMAYv — wirey00
– wirey00, Commented Nov 20, 2012 at 15:03

wirey00 · Accepted Answer · 2012-11-20 15:47:40Z

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

$('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/

answered Nov 20, 2012 at 15:47

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arno 2501 · Accepted Answer · 2012-11-20 14:53:11Z

0

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

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

//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.

answered Nov 20, 2012 at 14:53

Arno 2501

9,5179 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

Handling multiple event handler keypress on jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related