keypress handler canceling the event

Question

I have the following code

 jQuery('#parent').on('keypress', '.textbox', function(e) {
    var btn = jQuery(this).closest('tr').find('.btn');
    if (btn.length) {
        btn.triggerHandler('click');
    }
});

This code is a delegated keypress handler which is listening to the event of textboxes having class value ".textbox". The handler finds the button with class ".btn" & calls its click handler which has an ajax call in it.

Problem is this seems to prevent the event from completing i.e if the value in box is "2" & I type in a "3",the handler executes but the value in the box remains to be "2" instead of a "23".

It works normal when I comment out the btn triggerHandler statement.

Ideas why this is happening?

@Grommy its the same for `.trigger`,`triggerHandler` & `.click()`. — techie_28, May 05 '16 at 06:47
@Developer107 I will use that probably but was wondering why this is happening?lapse of concept or what? — techie_28, May 05 '16 at 06:48
.trigger and triggerHander, aren't the same, you can look it here: http://stackoverflow.com/questions/7530987/jquery-triggerhandler-vs-trigger-when-multiple-elements-are-selected — Grommy, May 05 '16 at 06:49
@techie_28 It might be because `keyup` event completes the key default action while `keypress` must be getting interrupted by the `trigger`. Refer this - http://www.quirksmode.org/dom/events/keys.html — Developer107, May 05 '16 at 06:53
does your button click cause a page reload/refresh or redraw of textfield? — benchpresser, May 05 '16 at 06:53
@benchpresser it has an ajax call which brings some HTML & appends to a container on the page but no reload/refresh though. — techie_28, May 05 '16 at 06:54
@Developer107 I think the answer to this is event not getting completed due to trigger of an event of different button i.e `tn.triggerHandler('click')`..could you please post this as an answer & I will accept. — techie_28, May 06 '16 at 05:37

score 1 · Accepted Answer · answered May 06 '16 at 05:43

1

Use keyup instead of keypress. As in your script you have triggered another event.

jQuery('#parent').on('keyup', '.textbox', function(e) {
   var btn = jQuery(this).closest('tr').find('.btn');
   if (btn.length) {
     btn.triggerHandler('click');
   }
});

keypress gets interrupted by triggerHandler and hence doesn't allow the default action of key press to occur. While keyup will perform default action first, then listen to handler.

answered May 06 '16 at 05:43

Developer107

1,728
2
14
24

need to know more about the event behaviors.. I expected both of them to work the same. – techie_28 May 06 '16 at 06:17
Still cant figure out why does `keyup` get disturbed but `keypress` does..what would be the case if it was `keydown`, `mouseleave` or some other event? – techie_28 May 06 '16 at 06:20
Did you try using `trigger` instead of `triggerHandler`? See this - http://stackoverflow.com/a/3772559/4719761 `triggerHandler` prevents event chaining – Developer107 May 06 '16 at 06:44

score 0 · Answer 2 · answered May 05 '16 at 13:14

0

I think you need to keyup function.

$(document).ready(function(){
   $("input").keyup(function(){
var rs= $(this).val();
  alert(rs);
        $("input").css("background-color", "pink");
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Enter your value: <input type="text">

answered May 05 '16 at 13:14

Akram Khan

114
8

I wanted to know why does keypress is getting canceled but keyup doesnt? – techie_28 May 06 '16 at 04:52
Keypress fire only when you press a any key and keyup fire when the user releases a key on the keyboard – Akram Khan May 06 '16 at 05:04
I understand that but it is not about firing.Keypress & Keyup both of them are fired here but Keypress is not getting completed. i.e the value typed is not getting shown in the textbox. – techie_28 May 06 '16 at 05:27
You need to keyup event to get whole textbox value as you mention in your query. – Akram Khan May 06 '16 at 05:30

score 0 · Answer 3 · answered May 06 '16 at 05:49

0

Try to use 'onchange' insted of 'keypress' or 'keyup'

  $(document).ready(function(){
  $("input").onchange(function(){
  var rs= $(this).val();
  alert(rs);
  $("input").css("background-color", "pink");
  });
});

answered May 06 '16 at 05:49

Vatsal Pathak

60
10

my question was why keypress doesnt complete but the keyup does? – techie_28 May 06 '16 at 06:18
keypress works when you keydown it raise an event before even the value is not enter in the text field till then, but keyup raise the event after the value enter in the text field. but if you want to write a string or a word keup raise event in each letter keyup and onchange event raise after entering the whole value when you change . – Vatsal Pathak May 06 '16 at 06:28
yes this is correct somewhat... but why is Keypress canceled at all in my case?there should be a point of its completion where the character should have been inserted in the input field. – techie_28 May 06 '16 at 09:54

keypress handler canceling the event

3 Answers3