Javascript 为什么js函数需要在html文件中，在这种情况下不能分离？

我现在有类似的东西

文件名：notes.html

{% load staticfiles %}



<script src="{% static "bootstrap/js/Notes.js"%}"></script>


 <div class="pure-container" data-effect="pure-effect-slide"  style="height: 10px">
          <label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left" style="margin-top:50px">
              <span class="pure-toggle-icon"></span>
          </label>

 </div>

---

现在，从上面的代码中，当我点击

pure toggle label

时，我希望控制台会显示“Hello World”。然而，似乎click函数从未被调用过。现在，如果我将

Notes.js

的内容移动到

Notes.html

中，并用标记

包围，那么函数将被调用。我的问题是为什么会发生这种情况？为什么我不能将该函数单独放置在一个单独的文件中并引用该文件。为什么当该函数移动到一个单独的js文件时，该函数不会被调用-

1.在任何jQquery代码之前添加一个jquery库（否则将不执行jquery代码）

2.将脚本代码放在页面末尾或按如下方式更改：-

$(document).ready(function(){
   $(".pure-toggle-label").click(function () {
       console.log("Hello World");
   });
});

---

一旦Js解释器找到要执行的代码段，Js代码（在您的例子中还有jquery）就会立即执行。。。如果在加载任何js库之前调用了要执行的代码，那么您将得到一个“…找不到错误”。。。另一方面，大多数初始化函数都锚定在站点中的onload方法上，这是因为大多数jquery函数都与dom元素相关，在操作之前必须正确加载这些元素

您是否在js文件之前添加了jquery库。我什么也没看到。检查浏览器控制台是否有错误听起来像是在DOM存在或加载之前附加了

click

事件侦听器。尝试移动

标记的位置（在元素之后），或者将JS包装成一个（例如，

$（document）.ready（function（）{…}）；

@Anant无浏览器错误reported@JoshCrozier我会给你一个机会try@JoshCrozier你是对的，看起来jquery选择器是在创建css之前被调用的。你能把它作为答案吗

$(document).ready(function(){
   $(".pure-toggle-label").click(function () {
       console.log("Hello World");
   });
});