title: Flask app not executing javascript when it's in an external file
body: <p>I have HTML file that contained my CSS and JS.  When creating my flask app I decided to separate out the CSS and JS to separate files in a static directory.</p>
  
  <p>When I have everything in one HTML file, everything works as expected, but when the CSS and JS are in separate files, parts of the JS don't execute.</p>
  
  <p>This is my import for in the HTML file:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>This is the contents of the standalone JS file:</p>
  
  <pre><code>$('#user_button').click(function(event) {
      $("#user_id").html($('option:selected').html());
      $('.button_div').show();
  });
  
  var prodData = [];
  var boughtProds = [];
  
  $('.prod_button').click(function(event) {
  
      if (boughtProds.indexOf($(this).data('name')) == -1) {
          prodData.push({
              name: $(this).data('name'),
              price: $(this).data('price'),
              quantity: 1,
          });
          boughtProds.push($(this).data('name'));
      } else {
          prodData[boughtProds.indexOf($(this).data('name'))].quantity = prodData[boughtProds.indexOf($(this).data('name'))].quantity + 1;
      }
  
      var total = 0;
      for (var x in prodData) total += prodData[x].price * prodData[x].quantity
      total = Math.round(total * 100) / 100
      var subtotal = '&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;Subtotal&lt;/td&gt;&lt;td&gt;$' + total + '&lt;/td&gt;&lt;/tr&gt;';
  
      var allProds = '';
      $.each(prodData, function(k, v) {
          allProds = allProds + '&lt;tr&gt;&lt;td&gt;' + v.name + '&lt;/td&gt;&lt;td&gt;' + v.quantity + 'x&lt;/td&gt;&lt;td&gt;@ $' + v.price + ' each&lt;/td&gt;&lt;/tr&gt;\n';
  
      });
  
      $('.table_contents &gt; tbody').html(allProds);
      $('.table_contents &gt; tfoot').html(subtotal);
  
  });
  
  $(document).ready(
      function() {
          $('.button_div').hide();
      })
  </code></pre>
  
  <p>The weird thing is that this function works properly on the document load:</p>
  
  <pre><code> $(document).ready(
          function() {
              $('.button_div').hide();
          })
  </code></pre>
  
  <p>and this function DOES NOT work:</p>
  
  <pre><code>$('#user_button').click(function(event) {
      $("#user_id").html($('option:selected').html());
      $('.button_div').show();
  });
  </code></pre>
  
  <p>But even weirder is that everything works when it is all in one HTML file.</p>
  
  <p>Any thoughts?</p>