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

Question

试图在 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" 作为其 class 的按钮。

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

</script>

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

Answer 1

我的建议是 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 文件路径。如果所有这些都没有解决您的问题，您可能需要 post 实际的 html 并描述 html 和 javascipt 的文件结构。我差点忘了问jquery是否确认有效，你把link加到jquery了吗？

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

有问题

Answer 2

您的脚本需要在您的按钮位于 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 中具有 class 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>

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

<script> tag not working in html <head> or external js file

html

jquery

script-tag

external-js

onclicklistener