jQuery: textbox keyup firing twice

I'm having a textbox and assigned the following function (it's the only function assign开发者_如何转开发ed):

txt.bind("keyup",function(event){
    if(event.keyCode==13)
    {
        var nu = $("#debug").html();
        nu+="<br>enter";
        $("#debug").html(nu);
    }
});

The strange thing is that it's actually firing twice, thus displaying "enter" twice in my debug window. Does anyone know what is causing this?

I know it's been quite awhile, but I'm surprised nobody suggested:

txt.unbind();
txt.bind("keyup",function(event){
    if(event.keyCode==13)
    {
        var nu = $("#debug").html();
        nu+="<br>enter";
        $("#debug").html(nu);
    }
});

If somehow txt got bound already, calling unbind before your new bind should fix it. Of course it's preferable to figure out why it's being bound twice. This just happened to me, because I accidentally had my JavaScript file included twice. Calling unbind helped me determine that was the problem.

i found out by myself - txt.bind was assigned twice to the textbox so it fired twice. is this a bug? i thought binding a function will always fire just once .. hmm

I'm having the same issue - keyup and keydown events are being fired twice though their handlers are bound only once and I'm definitely attaching them to only one element.

The interesting point is that this behavior can be observed only in Internet Explorer and in just one special case where my webapp is displayed in an embedded ActiveX control (CLSID_InternetExplorer). OS: Windows 7, IE 8, embedded ActiveX control is running in IE7 compatibility mode.

I've found a workaround however - process the jQuery's keypress event, which made also more semantic sense in my webapp.

I'm embarrassed to even mention this, but I was typing a capital letter into my textbox and so the release of my shift key was causing the supposed "second firing" of the keyup event. Turns out it wasn't a second firing at all, but it just fooled me into thinking it was for while. At first I thought the unbind trick mentioned above simply wasn't working for me, but it was. I hope this helps others like me that might have done the same thing. Now I simply make sure I always check that its not just the shift key being released in the handling of my event and all is well again.

I had a similar problem
found that object with assigned keyup function was inside another object
first was div second was input
found that keyup was assigned to input and to a div with this input

I had the same problem. Though i could not find a solution yet, i found the reason why it is triggering twice.

I am handing the event if the entered text has "@".For this i am listing each key stroke. To enter '@' you need two key precesses (@+shift) and that is the reason it is triggering twice.

could it be possible that your html-element is contained twice within txt?

it would be helpful if you would provide the html and the assigning javascript-code.

Here's my workaround for the same issue:

$('input').live('keyup keydown', function(e) {
    var thisKey = e.keyCode ? e.keyCode : e.which;
    if (thisKey == 13) {
        e.preventDefault();
        e.stopPropagation();
        if (e.type == 'keyup') {
            $(this).closest('form').submit();   
        }
    }
});

For me, it was a problem with the kendo that I was using in my aspx page. I was specifying a class on an input that later was being made as a combobox by kendo but the html that kendo was generating was different and it contained that class on parent element as well. For example I had this control in my aspx:

<input id="txtNameF" class="submitOnEnter" />

And the generated html in the browser looked like this:

<span class="k-widget k-combobox k-header submitOnEnter" style="width: 191px;">
  <span unselectable="on" class="k-dropdown-wrap k-state-default">
    <input class="k-input submitOnEnter" type="text" autocomplete="off" tabindex="1" style="width: 100%;">
    <span unselectable="on" class="k-select">
      <span unselectable="on" class="k-icon k-i-arrow-s">select</span>
    </span>
  </span>
  <input id="txtNameF" class="submitOnEnter" data-role="combobox">
</span>

So now, if you see I have the submitOnEnter class on the parent span element as well as the original element that it was added to. That is the reason when the input control is in focus then it will trigger the keyup/keydown/keypress event for that input as well as the parent element. To eleminate the issue, you can put a boolean flag that will check if it is the second time it is being triggered. For example:

var alreadyTapped = false;
$('.submitOnEnter').on('keyup', function(e) {
    if (e.key === "Enter") {
        if (!alreadyTapped) {
            alreadyTapped = true;
            //dostuff
        } else {
            alreadyTapped = false;
        }
        e.preventDefault();
    }
});

Or perhaps, you can remove the same class from your parent element on page load.