Question

I just tried changing my page contents with jQuery’s .load methdod.

While the contents changed without problem, I found that jQuery was still “seeing” the old content if I tried to select something, an example:

page:

 <div id="mycontentarea">
   <div id="myfirstcontent"></div>
   <div id="mysecondcontent"></div>
</div>

replacing content:

<div id=mythirdcontent"></div>
<div id=myfourthcontent"></div>

javascript:

// replace original content
$('#mycontentarea').load('replacement.html');
// print out the id of the first child
console.log($("#mycontentarea").children().attr("id"));

The console will print out “myfirstcontent” instead of “mythirdcontent” – why?

Answer 1

Because load is asynchronous and your console.log call is executed before the replacement happens.

Move any code that relies on the result of the call to load to a callback which is executed upon successful completion:

$('#mycontentarea').load('replacement.html', function() {
    //Anything in here is executed once the content has been returned successfully
    console.log($("#mycontentarea").children().attr("id"));
});

From the docs on load:

If a “complete” callback is provided, it is executed after
post-processing and HTML insertion has been performed. The callback is
fired once for each element in the jQuery collection, and this is set
to each DOM element in turn.