firebug shows js loading properly from static files but it doesn't work (Django)

I've successfully loaded the js files I want to use in my template, but for some reason the html is not being targeted. When I simply add a tag with the JS in it, it works. Can anyone tell me why my html (specifically the button being disabled and then enabled) is only picking us the JS when it is in the actual html file?

Here's the html with the js included. I'd like to just load it statically

<!DOCTYPE html>
{% extends "app/base.html" %}
{% load staticfiles %}
{% block js %}
  <script type="text/javascript" src="{% static 'js/grow.js' %}"></script>
{% endblock %}
{% block content %}
<body>
  <div id="message" style="visibility: hidden;"></div>
  <div id="tree"></div>
  <a href="/register/">register</a>
<form method="POST">
  {% csrf_token %}
  <input type="text" id="txt" />
  <input type="submit" id="grow" value="grow" style="color: grey;"/>
</form>
<script>
    var GROW_PATTERN = /.+\(.+\)/;
  var REQUIREMENTS = "valid entries must be of the form ";
  var GROW = "X(Y)".italics();
  var GROW_REQUIREMENTS = REQUIREMENTS + GROW;

  var filtered_keys = function(obj, filter) {
    var key, keys = [];
    for (key in obj) {
      if (obj.hasOwnProperty(key) && key.test(filter)) {
        keys.push(key);
      }
    }
  return keys;
  }

  // define p5 functions


function getCookie(name) {
          var cookieValue = null;
          if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
               var cookie = jQuery.trim(cookies[i]);
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) == (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
             }
          }
      }
 return cookieValue;
}

  $("#grow").hover(
    function() {
      $("#message").text(GROW_REQUIREMENTS);
      $("#message").css('visibility', $("#txt").val().match(GROW_PATTERN) ? 'hidden' : 'visible');
      $.prototype.css.bind($("#message"), 'visibility', 'hidden');
  });


  $("#grow").click(
    function(e) {
      console.log("attempting ajax...");
      e.preventDefault();                 
      var csrftoken = getCookie('csrftoken');
      var open_parens = ($("#txt").val()).indexOf("(");
      var close_parens = ($("#txt").val()).indexOf(")");
      var child = $("#txt").val().slice(0, open_parens);
      var parent = $("#txt").val().slice(open_parens + 1, close_parens);
      $("#txt").val('');

      $.ajax({
    url : window.location.href,
        type : "POST",
        data : { csrfmiddlewaretoken : csrftoken,
                 child : child,
                 parent : parent,
             mode : "grow"
           },
        success : function(json) {
                    if (json['already']){
              $("#message").text(json['child'] + "(" + json['parent'] + ") already grown.  Please enter something else!");
            } else {
            setup();
            draw(json);
            console.log("draw called successfully, json type is: " + typeof json);        

            $("#learn").css('color', json['tree?'] ? 'black' : 'grey');
            if (json['tree?']){
              $("#tree").text(json['tree?']);
            }
            }
               },
        error : function(xhr, errmsg, err) {
              console.log(xhr.status + ": " + xhr.responseText);
                                         }

         });
});


  $("#txt").on('input', function() {
    $("#grow").css('color', $("#txt").val().match(GROW_PATTERN) ? 'black' : 'grey');
  });

  </script>
</body>
{% endblock %}

Solution

You're including the JS file before the DOM elements you're targeting. Either wrap all of the code in grow.js in a $(document).ready(function(){}) or include the JS file just before the closing </body> tag (the latter is preferred).