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

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 2

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

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