jQuery .load() is not fired
<p>In response to an event this is executed:</p>

<pre><code>$.getScript('nav.php?node=' + node);
</code></pre>

<p><code>nav.php</code> returns the following with correct headers (<code>'Content-type: application/javascript'</code>)</p>

<pre><code>$('#uis').append('&lt;div id="app-personal-games-ui"&gt;&lt;/div&gt;',function() {
    $('#app-personal-games-ui').load('loadhtml.php', {from: 'app.personal.games.ui'})
);
app.personal.games = function() {
    activate('app-personal-games-ui');
};
app.personal.games();
</code></pre>

<p>What I am trying to acheive with the above code is:</p>

<ol>
<li>append a wrapper <code>&lt;div&gt;</code> for the new content to <code>div id="uis"&gt;</code></li>
<li>we set an <code>id</code> for the div just added, now use that id as a selector and load the actual html with <code>.load()</code></li>
<li>add a function to our <code>app</code> object. this function would make the new div visible</li>
<li>execute the function added in step 3</li>
</ol>

<p>The results show all steps complete successfully except for #2. i.e. <code>&lt;div id="app-personal-games-ui"&gt;&lt;/div&gt;</code> <em>is</em> added to the correct place, and <code>app.personal.games.toString();</code> in firebug shows the function is added to the object and has the correct code. But the <code>load</code> line does not get executed and the new div remains blank.</p>

<p>Why is this happening, and how can I make it work?</p>
