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

Question

I've successfully loaded the js files I want to use in my template, but for some reason the html is not being targeted. 我已经成功加载了要在模板中使用的js文件，但是由于某些原因，html未被定位。 When I simply add a tag with the JS in it, it works. 当我简单地添加一个带有JS的标签时，它就可以工作。 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? 谁能告诉我为什么我的html（特别是禁用然后启用的按钮）仅在实际html文件中才选择JS？

Here's the html with the js included. 这是包含js的html。 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 %}

Answer 1

You're including the JS file before the DOM elements you're targeting. 您要在目标DOM元素之前添加 JS文件。 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). 要么将grow.js中的所有代码包装在$(document).ready(function(){})要么在</body>标记之前包含JS文件（首选后者）。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-05-31 16:18:47

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-05-31 16:18:47

解决方案1
2 已采纳 2016-05-31 16:18:47