firebug 显示 js 从静态文件正确加载，但它不起作用 (Django)

Question

我已经成功加载了我想在我的模板中使用的 js 文件，但由于某些原因 html 没有被定位。当我简单地添加一个带有 JS 的标签时，它就起作用了。谁能告诉我为什么我的 html（特别是禁用然后启用的按钮）只在实际的 html 文件中选择 JS？

这是包含 js 的 html。我只想静态加载它

<!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 %}

Answer 1

您在之前包含您定位的DOM元素。要么将 grow.js 中的所有代码包装在 $(document).ready(function(){}) 中，要么在 </body> 结束标记之前包含 JS 文件（后者是首选） .

firebug 显示 js 从静态文件正确加载，但它不起作用 (Django)

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

javascript

django

firebug

static