Question

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).

So here is my div that I have in my one page app

<div id="content">
</div>

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

Here’s my JavaScript

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

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

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

<p id="newText"> Blah blah blah blah blah blah blah blah blah blah blah</p>

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

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

Does anyone know how I should go about this?

* UPDATE *

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()

Answer 1

Use either the native .load() callback:

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

Or the .ajaxStop() which registers a handler to be called when all Ajax requests have completed.

$('#result').ajaxStop(function() {
    alert('Triggered ajaxStop handler.');
});