Search code examples
jqueryjquery-load

jQuery focus() causes .load() to excecute twice in IE9


jQuery focus seems to cause internet explorer 9 to execute twice. This problem doesn't happen in older versions of IE, and doesn't happen in Firefox or Chrome.

I'm having a user enter a code in an input field. On enter or submit the code gets sent through a load to another script (ajax). The code in the input field is removed, and the focus is brought back.

The result of that script is inserted in a div on the same page.

    $(document).ready(function(){
        $('#code').keyup(function(e){
            if(e.keyCode == 13){
                console.log('Code submitted through enter');
                sendcode($('#code').val());
            }
        });

        function sendcode(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        };

        $('#Submit').click(function(){
            console.log('Code submitted through click');
            sendcode($('#code').val());
        });
    });

However, the focus() seems to be the problem since when I remove it the problem is gone. I have tried placing the focus() in any place of the code but without success. Is there any alternative to focus() that achieves the same or can it somehow be fixed?

NETWORK:

URL: /scan.php?code=stackoverflow
URL: /scan.php?code=

CONSOLE: (when hit enter)
Log: Code submitted through click 
Log: function sendcode used 
Log: Code submitted through enter 
Log: function sendcode used 

You can see the second load doesn't carry the code variable either.


Solution

  • Change the Submit button to a span or div and style it.

    <span id="Submit">Submit</span>
    

    Demo: Fiddle

    You can also look at this answer, where adding an attribute type="button" to the button element is suggested.