Input Fires Keypress Event Twice

Question

This question has been asked/answered (mostly) before, BUT I've tried three things to stop the event from bubbling but nothing has worked:

return false;
e.stopPropagation();
e.preventDefault();  

(return false should take care of the other two, correct?)

Here's the html:

<div class="tags-holder">
    <input type="text" class="addField" id="addField_<%= visit.id %>"  placeholder="add a new tag">
</div>

And the JS (UPDATE CLEANED UP):

    $('.addField').show().keyup(function(event){
  event.preventDefault();
  
      if(event.keyCode == 13 || event.keyCode==9) {
    ProfilePage.createTag( this, 'nada', 'addField')
        $(this).hide().val('');

        return false;       
   }

});

I left the redundant stoppers in there but really shouldn't return false simply kill the bubbling? (using Chrome).

Clue? keyCode=13 is "Enter"

Answer 1

I had same issue and I used above method and it work for me.

$(document).unbind('keypress').bind('keypress', function (e) {
   // some logic here
});

Answer 2

Wow. Your help was great and helped me think it through.

BUT the solution feels a bit like a cop-out; effective, but the condition should never be there in the first place.

Here it is, which I found in the comments from here: http://yuji.wordpress.com/2010/02/22/jquery-click-event-fires-twice/

    $('.plus').unbind('click').bind('click',function(e){    
console.log('clicked')
    var id=$(this).attr('plus_id');
    var field=$('<input type="text">').attr({'placeholder':'add a new tag','id': 'addField_' + id, 'visit_id':id});
    field.focus();
    field.show().keydown(function(event){
        event.stopImmediatePropagation();
        if(event.keyCode == 13 || event.keyCode==9) {
            console.log(event)
            ProfilePage.createTag( field, 'nada', 'addField')
            field.hide().val('');
            return false;       
        }
    }).click(function(e){
        return false;
    })
    ;
$(this).append(field);
return false;       
   });

Answer 3

Try unbinding the event first then bind it, refer below code:

$('.addField').show().unbind('keyup').keyup(function(event){
 event.preventDefault();

  if(event.keyCode == 13 || event.keyCode==9) {
ProfilePage.createTag( this, 'nada', 'addField')
    $(this).hide().val('');

    return false;       
}

An explanation is here, i had written a post about this on my new blog.

Answer 4

Hope this will solve your problem. Instead of using event.preventDefault() use these two shown below. In case of Microsoft browsers use event.cancelBubble = true; In case of W3C model browsers use event.stopPropagation();

And Instead of Keyup event kindly use the keypress event, because during keypress itself the input will be sent to input field so whatever inputs you don't want to appear will appear on the field. So the enter button event will be triggered.

Instead of return false use event.returnValue = false.

Answer 5

This is a problem which always drives me insane but i think this is the solution simply return false, if you return true it repeats it self randomly so im guessing it must have a listener which listens out for true responses.

Short Answer Add return false;

$("#register-form #first_name").keyup(function(event) {
console.log('hello world');
return false;

});

in the original question if you look at the code closely is seems the return false was written one line too early.

Answer 6

I had this issue using Angular 11 EventEmitters. I solved it by creating a new instance of my event emitter whenever the event is triggered.

@Output() keypress = new EventEmitter();
onKeyPress(event) {
   this.keypress = new EventEmitter();
   this.keypress.emit(event);
 }

Answer 7

I passed through the same and this structure worked for me:

const onKeyPress = (e: React.KeyboardEvent): void => {
    if (onSubmit && e.key.toLowerCase() === 'enter') {
      onSubmit();

      e.stopPropagation();
      e.preventDefault();
    }
};

Answer 8

Try changing all the instances of

$(field).functionCall() 

to

field.functionCall() 

since field is already a jQuery object.

Ok now we've established that this wasn't the error. I tested in Firefox 7 and Chrome 15 and saw that the code block in the if statement is only fired once when enter is pressed. Try checking to make sure that something inside the createTag() function isn't doing something twice.

Answer 9

What do you think is catching the event when it bubbles. I only get one firing with this test page.

<!DOCTYPE html>
<html>
  <head>
    <title>Scratch</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.setOnLoadCallback(function (){
        $('input[type="text"]').keyup(function (){
          console.debug('keyup');
        });
      });
      google.load('jquery', '1.6.4');
    </script>
  </head>
  <body>

    <div class="something">
      <input type="text" />
    </div>
  </body>
</html>

Maybe it's your selector. Is it nested inside another .addTag? When I change the jQuery selector and also make the div and input the same class I start to get two events firing. Like this:

$('.thing').show().keyup(...);

...and...

<div class="thing">
    <input class="thing" type="text" />
</div>