为什么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的内容移至被标签<script> </script>包围的Notes.html，则该功能被调用。我的问题是为什么会发生这种情况？为什么我不能单独将该功能放在单独的文件中并引用该文件。为什么当功能移动到单独的JS文件

Answer 1

需要注意事情： -

1.在任何jqquery代码之前添加jQuery库（否则jQuery代码将无法执行）。

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

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

Answer 2

js代码（在您的情况下，jQuery）将在JS解释器找到要执行的摘要后立即执行...如果在任何JS LIB之前调用要执行的代码加载，然后您将得到一个" ...找不到错误" ...另一方面，大多数初始化功能都锚定在网站中的Onload方法上，这是因为大多数jQuery函数与必须正确必须正确的DOM元素有关在操纵之前加载