views:

74

answers:

2
...

  $(document).ready(function(){

        $('form').submit(function(){
                $('input#second').focus();
                return false;
        });

        $('#first').blur(function(){
                alert('blur');
        });
  });

...

  <form>
    <input id=first><br>
    <input id=second><br>
    <input type=submit>
  </form>

...
  1. Load the page
  2. Click on first input to give it focus
  3. Hit Enter to submit the form

Then the following happens:

  1. $('form').submit() is called and
  2. It sets focus to the #second input and exits
  3. #first looses focus, #second gets it, but...
  4. $('#first').blur() is not called

Here is a live demo.

What am I missing?

Thanks

+2  A: 

Nick is right your HTML is really messed up. You have not ended you input tags or the br(s). On top of that you should put your attribute values in your input tags in double quotes.

This works here is a demo http://www.jsfiddle.net/dAdG8/

<script type="text/javascript">
$(document).ready(function(){
    $('form').submit(function(){
         $('input#second').focus();
         return false;
    });

     $('#first').blur(function(){
         alert('blur');
     });

     // logging
     $('input').blur(function(){
         $('pre').append('blur, ' + this.id + '\n');
     });

     $('input').focus(function(){
         $('pre').append('focus, ' + this.id + '\n');
     });
});
</script>

<form>
     <input id="first" />
     <br />
     <input id="second" />
     <br />
     <input type="submit" />
 </form>
John Hartsock
This isn't correct, it works fine in Chrome...the issue is elsewhere.
Nick Craver
@Nick ... Sorry your right. I corrected my answer
John Hartsock
Nope, same behaviour on FF - http://swapped.cc/tmp/jquery-blur-quirk-2.html
Alex
Moreover, this is clearly not a mark-up issue, because adding onblur to #first works - specified onblur() code is executed. Just try adding onblur="alert('onblur');" to the first input tag.
Alex
@Alex I just ran it and its functioning as it should. I see the alert(blur)
John Hartsock
@John - well, and I don't :) FF 3.6.11 on Windows XP. This must be a JQ bug, I don't see any other explanation.
Alex
@Alex ..did you try my demo
John Hartsock
@Alex...acutally the issue I see is not that the blur is not called but the focus to the second input is not called
John Hartsock
@John - The `.focus()` handler on the second input *is* called. In your demo, you left out the `<pre>` tag for logging, so you can't see the effect of the `.focus()`. Here's your demo with the `<pre>` tag in HTML. http://www.jsfiddle.net/dAdG8/1/
patrick dw
Submitted JQuery ticket - http://bugs.jquery.com/ticket/7311
Alex
Nick Craver
A: 

According to this comment over at JQuert bugtracker, the work around the problem is to use

$('input#second')[0].focus();

instead of

$('input#second').focus();

Whether it is a bug is still to be decided by jq people in charge, but I would guess that it is because

  1. the behaviour appears to be browser-specific
  2. no reason why calling focus() on the array with one element should not be the same as calling it specifically for that element

Thanks, everyone. Night.

Alex