Question

I’m trying to insert html into my page, then use that html as the target of a plugin. I’m finding that the inserted html isn’t “there yet”. Here’s my test:

        $(function () {
            $("#menucontainer").load("test3.htm #Menu");
            setTimeout('alert("Asynchronous: " + $("#Menu").length)', 1000);
            alert("Synchronous: " + $("#Menu").length);
        });

The alert in the READY function shows a length of 0, but the alert 1 second later shows a length of 1. The html from the file was inserted as desired but just wasn’t available inside the READY function. Is there some way to force it so I can manipulate my inserted html inside the READY function?

Answer 1

The use of .load() is to inject HTML into the selected target. There is 1 required argument and one optional argument: the URL to the page to grab via AJAX and a callback when it’s complete.

In other words…

$(function() {
  $('#menucontainer').load('test3.html', function() {
     // This code will fire when the content of test3.html has been loaded into the tag with id menucontainer
  });
});