jQuery: load() loads the page but doesn't focus the textbox
<p>I have a fiddle : <a href="http://jsfiddle.net/SDr3F/10/" rel="nofollow">http://jsfiddle.net/SDr3F/10/</a>  </p>

<p><strong>Currently:</strong>  </p>

<p>onclick, it alerts </p>

<pre><code>alert('hi')  
</code></pre>

<p><strong>Required:</strong> </p>

<p>onclick, it loads a <code>search.html</code> with a search text box and <code>focus</code> in textbox  </p>

<p><em>search.html</em>  </p>

<pre><code>&lt;input id="search-input" type="text" class="input-medium search-query span4"&gt;  
</code></pre>

<p><strong>How I set focus?</strong>  </p>

<pre><code>$(function(){
  $("#search").click(function(){
      $('#feature').load('templates/search.html');
      $('#search-input').focus();
      alert("hi");
  });
});
</code></pre>

<p><strong>Problem</strong>  </p>

<ul>
<li>It loads the page BUT doesn't focuses inside textbox, how do I fix this?</li>
</ul>
