Raising a loaded event on jQuery Ajax .load() method
<p>I have an app that has a 1 page with a DIV that changes its content when the user clicks part of my navigation bar (which is contained within the same page).</p>

<p>So here is my div that I have in my one page app</p>

<pre><code>&lt;div id="content"&gt;
&lt;/div&gt;
</code></pre>

<p>Now I populate this DIV with other html files using the jQuery <code>.load()</code> method (the HTML files that are fed into the .load method I have stripped of and  tags, etc, etc…)</p>

<p>Here’s my JavaScript</p>

<pre><code>$("#content").load("views/"+ pageName + ".html", function(){
// do stuff… like load JavaScript files, etc...
}).fadeIn("fast");  
</code></pre>

<p>This is working fine however the content which is brought to the page using the <code>.load()</code> I wish to attach a function to once it has loaded to the DOM.</p>

<p>So say I .load() the following contents from a HTML page using the JavaScript above</p>

<pre><code>&lt;p id="newText"&gt; Blah blah blah blah blah blah blah blah blah blah blah&lt;/p&gt;
</code></pre>

<p>I wish to raise an event once this is loaded, however I’m unsure what I should bind it to, like <code>.live()</code>, <code>.on()</code> or <code>.ready()</code>… I was thinking of something like this…</p>

<pre><code>$('#newText').load(function() { 
   alert("Handler for .load() called for newText. This is in the DOM and loaded!");
});
</code></pre>

<p>Does anyone know how I should go about this?</p>

<p><strong>* UPDATE *</strong></p>

<p>Okay perhaps I need to explain... I am inherited this app from another developer and I think it was built with a bad architecture / model. Anyway, the pages or views that are loaded have a lot of hidden tabs / toggled content (hence me not liking the architecture) so despite the view / HTML being loaded some of its content may not be available in the DOM when first loaded. That is why I am wishing to detect when a something is loaded into the DOM on top of using the jQuery Ajax .load()</p>
