title: Flask app and JQuery not being loaded properly
body: <p>UPDATE: Tried everything in the answer below and it hasn't helped.</p>
  
  <p>I've got a Flask app and in the templates I'm running some JQuery. The JQuery pulls in the <a href="http://developers.aviary.com/" rel="nofollow">Aviary editor</a>..or it's supposed to, on page load. For some reason the JQuery isn't running in the proper sequence or something, because the editor only works if I add an artificial delay to the JQuery function. For example, this does not work:</p>
  
  <blockquote>
  <pre><code>&lt;script type='text/javascript'&gt;
      id = "image";
  
     var featherEditor = new Aviary.Feather({
         apiKey: 'my_api_key',
         apiVersion: 3,
         theme: 'minimum', // Check out our new 'light' and 'dark' themes!
         tools: 'all',
         noCloseButton: true,
         appendTo: 'result-image',
         onSave: function(imageID, newURL) {
              //this code was removed for brevity
         },
         onError: function(errorObj) {
             alert(errorObj.message);
         }
     });
         function launchEditor(id) {
             featherEditor.launch({
                 image: id
             });
            return false;
          }
      $(document).ready(function() {
             launchEditor(id);
      });
  &lt;/script&gt;
  </code></pre>
  </blockquote>
  
  <p>But this code below works fine. After the delay runs out, the editor launches:</p>
  
  <blockquote>
  <pre><code>&lt;script type='text/javascript'&gt;
      id = "image";
  
     var featherEditor = new Aviary.Feather({
         apiKey: 'my_api_key',
         apiVersion: 3,
         theme: 'minimum', // Check out our new 'light' and 'dark' themes!
         tools: 'all',
         noCloseButton: true,
         appendTo: 'result-image',
         onSave: function(imageID, newURL) {
              //this code was removed for brevity
         },
         onError: function(errorObj) {
             alert(errorObj.message);
         }
     });
         function launchEditor(id) {
             featherEditor.launch({
                 image: id
             });
            return false;
          }
    $(document).ready(function() {
              setTimeout(
                             function() 
                             { 
                                      launchEditor(id);
                             }, 3500);
  
     });
  &lt;/script&gt;
  </code></pre>
  </blockquote>
  
  <p>I tried using (window).load() instead, moving the javascript from the header to the footer and a bunch of other things. The only thing that got the editor to load properly was adding a delay of a few seconds to the function call.</p>
  
  <p>Now, while this was fine for testing, this isn't very conducive to a happy user experience. I'd like to figure out why the function isn't working until a few seconds after the page finishes loading.</p>
  
  <p>Any advice is appreciated! Thank you</p>