javascript - 为什么在这种情况下js函数需要在html文件中并且不能分开？

Question

我现在有这样的东西

文件名: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>

现在我有一个名为 Notes.js 的文件是这样的(这个文件在 Notes.html 文件中被引用。)

文件名:Notes.js

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

现在从上面的代码中，当我点击 pure-toggle-label 时我希望控制台获得“Hello World”。但是似乎永远不会调用点击功能。现在，如果我移动 Notes.js 的内容至 Notes.html被标签包围 <script> </script>然后函数被调用。我的问题是为什么会这样？为什么我不能将该函数单独放在一个单独的文件中并引用该文件。为什么将函数移动到单独的js文件时不会调用该函数

Answer 1

需要注意的事情:-

1.在任何jQquery代码之前添加一个jquery库(否则jQuery代码将不会执行)。

2.要么把你的脚本代码放在页面的末尾，要么像下面这样改变它:-

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