How to use jQuery's load(fn) method so it actually works
<p>JQuery documentation has this to say about .load(fn) (<a href="http://docs.jquery.com/Events/load#fn" rel="nofollow">http://docs.jquery.com/Events/load#fn</a> ):</p>

<blockquote>
  <p>Note: load will work only if you set
  it before the element has completely
  loaded, if you set it after that
  nothing will happen.</p>
</blockquote>

<p>So when one is supposed to bind the load event for <code>&lt;div id="test"&gt;</code>? As far as I understand doing it before this div actually appears won't work, because $('#test') won't select it, and doing it after that is, as mentioned above, too late. Following code seems to support this:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

   $('#test').load(function(event) { event.target.css('color', 'blue'); alert('a');});

&lt;/script&gt;

&lt;div id="test"&gt;TEST&lt;/div&gt;

&lt;script type="text/javascript"&gt; 
   $('#test').load(function(event) { event.target.css('color', 'red'); alert('b');});
&lt;/script&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>After loading it nothing happens (no color changes, no alerts) and Firebug says everything is ok.</p>
