JQuery - Show() then focus() does not work as expected

Question

This is the script

<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(document).ready(function() {
        $('input[type="text"]').blur(function() {
        
            $(this).removeClass("focus");
            var a = $(this).context.id;

            if (a.indexOf('guest') > 0)
            {
                if ($(this).val()&&$(this).val()!=0)
                    {
                        //$(this).parent().parent().next().show();      
                        var b = $(this).parent().parent().next().children().find("textarea");
                        b.parent().parent().show();
                        b.addClass("focus");
                        b.focus();
                    }
                    
                                    
                else
                    {
                        $(this).parent().parent().next().children().find("textarea").val('');
                        $(this).parent().parent().next().hide();}       
            }
        });
    
    });
</script>

Here is the HTML

<table width="620" border="1">
  <tr>
     <td>&nbsp;</td>
     <td style="width:40%"> Memebers $40 </td>
     <td style="width:40%"> Each guest $45 </td>
  </tr>
  <tr>
     <td><input name="breakfast1" type="checkbox" value="breakfast1" tabindex="0" /></td>
     <td>September 12, 2012</td>
     <td style="width:50%">How many guests
        <input type="text" maxlength="2" size="3" id="1guest" name="1guest" tabindex="1" />
     </td>
  </tr>
  <tr style="display:none">
     <td colspan="2">&nbsp;</td>
     <td>
        <textarea class="guests" style="width:300px;" id="1mguests" name="1mguests"  rows="4" tabindex="2">   </textarea>
        <br /><span></span>
     </td>
  </tr>    </table>    and so on<br/>

What am I trying to accomplish: When tabbing out of the 1guest text field check if the input field has something and if so, un hide (show) the next tr and set the focus to the textarea in the that tr.

What is the problem: When one enters number of guests in the 1guest input field and TAB out of it, the hidden tr shows OK, the textarea input in the tr gets the class .focus BUT does not get the foucs. What Can be the issue? Is it because the TAB is applied after the focus and therefore goes to the next input field? In any event can you propose a solution to what I am trying to accomplish?

Thanks

Answer 1

It may be that the .show() is executing in turn, but finishing after the addClass() and focus()

Try this:

b.parent().parent().show(function(){
     b.addClass("focus");
     b.focus();
});