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

我已经成功地加载了我想在我的模板中使用的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 %}

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

相关内容

最新更新

热门标签：