Question

58

Input Fires Keypress Event Twice

rated 0 times [ 62] [ 4] / answers: 1 / hits: 38448 / 13 Years ago, wed, november 2, 2011, 12:00:00

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"

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kerryoliviaa

Add To Favorites

Follow

Total Points: 221

Total Questions: 102

Total Answers: 117

Location: Sint Maarten

Member since Tue, Mar 29, 2022

2 Years ago

kerryoliviaa questions

1 Using useContext and useReducer in NextJS and reading null as context

Sun, May 15, 22, 00:00, 2 Years ago

1 Material UI Input not detecting when enter key is pressed

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Nodejs async/await mysql queries

Fri, Mar 6, 20, 00:00, 4 Years ago

1 How to trigger keydown event only for alphanumeric and special characters in Angular7?

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to create singleton classes in Javascript?

Tue, Jan 7, 20, 00:00, 5 Years ago

View All

answered 13 Years ago dylan · Accepted Answer

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;       

   });