JQuery & IE - event firing delay

Question

Hey guys,

I'm working with a bar code reader that dumps in data in keyboard mode into a text box. It basically types in a bunch of numbers (about 250 characters) quickly. There is a start character "%" that I'm looking for and when that comes across I want to display a working/waiting image while the rest of the data comes in.

This works perfectly in Firefox and Chrome and of course not IE. In IE, the image only gets displayed after all of the data has been read into the text box so it's basically delaying firing that event for some reason. Any idea how to get this working?

Here's the code:

$("*").bind('keypress', function () {
    if (event.keyCode == '037') {
        $('#<%= this.txtData.ClientID %>').focus();
        $('#processingData').fadeIn('slow', function () { });
    }
});

PS. I'm listening for all keypresses and on the "%" key press it sets the focus on the textbox to read the data.

Answer 1

You are binding an event handler to every single item on the page. Rather than doing that, use event delegation to bind a single event. This should speed it up tremendously. IE uses an older JavaScript engine, so its going to be slower than the modern browsers. This should change when IE9 gets released.

.live() will bind a single event handler to the document. Also, you need to pass in the event object to your function. Let us know how that runs :)

$("*").live('keypress', function (event) {
    if (event.keyCode == 37) {
        $('#<%= this.txtData.ClientID %>').focus();
        $('#processingData').fadeIn('slow');
    }
});