Setting the focus on a element that was hidden
<p>I'm looking for a way to trigger a focus event that occurs after an element is recognised as focusable within the DOM.</p>

<p>I'm showing form elements based on previous input. That works.
Then I want to set the focus for user input.</p>

<p>The following function fails to work unless I set a break point on the line with setTimeout.
I've tried using a function callback which also failed.</p>

<pre><code>function triggerFocus(id,timeout){
    console.log('triggerFocus') ;
    console.log(id) ;
    /* the following works if a breakpoint is set*/
    setTimeout( function() { $( id ).focus() }, timeout ) ;
}

/* code used to show the elements from another function */
if ( $('#first').val() == '') {
    $('#firstRow').show() ;
    $('#middleRow').show() ;
    $('#lastRow').show() ;
    $('#emailRow').show() ;    
    triggerFocus($('#first'),100) ;    
} else {
    $('#docket').blur(docketBlur) ;
    $('#firstRow').show() ;
    $('#docketRow').show() ;
    triggerFocus($('#docket'),100) ;    
}
</code></pre>

<p>An example showing how to achieve this using a tab keyCode is at <a href="http://jsfiddle.net/pvrSU/" rel="nofollow">http://jsfiddle.net/pvrSU/</a>
I discovered that the other element must be focusable before the blur event is fired.</p>
