<script> 标签在 html <head> 或外部 js 文件中不起作用答案

【问题标题】：<script> tag not working in html <head> or external js file<script> 标签在 html <head> 或外部 js 文件中不起作用
【发布时间】：2018-02-21 07:31:37
【问题描述】：

试图在 HTML 文件中要求 js。通过下面看到的标签需要外部js文件

<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/events.js"></script>

这些脚本标记不起作用，因为它们内部的事件处理程序没有触发。因此，在以前的项目中，我很幸运地在 HTML 的标签中编写了所有 js 逻辑，看起来像这样（也在这个项目中以及外部 js 中）此外，html 文件有一个带有“shuffle”的按钮作为它的类。

<script type="text/javascript">
$(".shuffle").click(function(){
  console.log("hello");
  let arr = onShuffle();
  shuffleSuccess(arr);
});

</script>

有趣的是，我把上面的函数放在了 index.html/project 文件的控制台中，点击处理程序和外部 js 文件中的 shuffleSuccess 函数一样工作。谢谢！

【问题讨论】：

如果你把它放在<head> 中，当它运行时没有shuffle 类的元素。 Javascript 在 HTML 文档中被解析时运行。您需要将其包装在 onready 事件中，或将其放在定义元素的位置之后。
这是一个很好的观点。我有一个带有 class="shuffle" 的按钮。这行得通吗？
仅当按钮在定义该功能的位置高于时。

标签： jquery html onclicklistener script-tag external-js

【解决方案1】：

您的脚本需要在您的按钮位于 DOM 后执行。您的选择是将其放在页面底部，就在结束正文标记之前，或使用document.ready，如下所示：

//This waits until all objects are loaded in the DOM
$(document).ready(function() {
    //Then assigns the event handler
    $(".shuffle").click(function(){
      console.log("hello");
      let arr = onShuffle();
      shuffleSuccess(arr);
    });
});

如果您的脚本位于外部文件中，$(document).ready 是一个不错的选择。

或者，您可以使用 http://api.jquery.com/on/ 。这会将单击处理程序应用于body 中具有shuffle 类的任何内容，即使稍后添加也是如此。这可以说比$(document).ready

$("body").on("click", ".shuffle", function() {
  console.log("hello");
  /*let arr = onShuffle();
  shuffleSuccess(arr);*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="shuffle">Shuffle</button>

如果您想更改脚本顺序，可以使用以下方法：

<html>
   <head>
      <title>Your Page</title>
      <!-- Some CSS Links -->
   </head>
   <body>
     <!-- Some Content --> 
     <input type="button" value="I'm a button">
     <!-- Some more content -->
     <!-- Note: the script comes after the button is placed -->
     <script type="text/javascript">
     $(".shuffle").click(function(){
        console.log("hello");
        let arr = onShuffle();
        shuffleSuccess(arr);
     });
     </script>
  </body>
</html>

【讨论】：

【解决方案2】：

我的建议是 1. 如果您使用 html5，例如，请改用以下内容：

<script src="scripts/ui.js"></script>
<script src="scripts/events.js"></script>

2. 将脚本标签放在页面底部，如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- include jquery cdn link. internet connection is needed to work-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div>  <!-- just some elements -->
            <div>Just some elements</div>
        </div>
        <!-- include the script tags here like this -->
        <script src="scripts/ui.js"></script>
        <script src="scripts/events.js"></script>
    </body>
</html>

3. 检查您是否正确指定了 javascript 文件路径。如果所有这些都不能解决您的问题，您可能需要发布实际的 html 并描述 html 和 javascipt 的文件结构。我差点忘了问 jquery 是否被确认可以工作，你是否包含了指向 jquery 的链接？

还有一些事情
1. 请在尝试上述任何建议之前执行此操作：注释掉所有 jquery 代码并编写 console.log("Hi");，检查它是否有效。如果它不起作用，请使用上面的脚本标签并重试。如果这次没有成功，这意味着你错误地指定了 js 文件路径。如果它有效，那么 jquery 有问题。

【讨论】：