Question

My understanding of jQuery is the script will be executed as soon as the document is ready.

I have some dynamically generated HTML that are generated on page load as soon as response is back from server as to what to generate. The HTML are all part of a template. All of those are kicked off with the following line.

   window.App=new AppView;

and right after that line, I have

   alert($("#field").val());

where $(“#field”) is part of the template which was dynamically generated into HTML

And NULL was alerted.

But if I set a setTimeout to carry out the alert, I see a value.
Both lines of code are within the jQuery {}.

Can someone explain why 2nd line is executed before everything in 1st line is executed.

P.S. This is the line that generate the template

     $("body").html($.tmpl("temp", data)); 

Answer 1

I think I just figured out the problem. You said your code involved getting a GET request from the server? Well, that means async code. In other words, here’s what happens:

You call new AppView
    - Inside AppView, a XHR is created, sending a GET request to server
    - Code finishes inside AppView, and returns to calling function
You call alert field val (not created yeat)
Some time later, the GET request is finnished
    - Inside callback-function for GET-request. Your field get's created.