Question

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

＆＃xA;＆＃xA;

 ＆lt; script type =“text / javascript”src =“scripts / ui.js”＆gt;＆lt; ; / script＆gt;＆＃xA;＆lt; script type =“text / javascript”src =“scripts / events.js”＆gt;＆lt; / script＆gt;＆＃xA;

＆＃xA; ＆＃xA;

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

＆＃xA;＆＃xA;

 ＆lt; script type =“text / javascript”＆gt;＆＃xA; $（“。shuffle”）。click（function（）{ ＆＃xA; console.log（“hello”）;＆＃xA; let arr = onShuffle（）;＆＃xA; shuffleSuccess（arr）;＆＃xA;}）;＆＃xA;＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

有趣的是我把上面的函数放在index.html / project的文件的控制台中单击处理程序以及 shuffleSuccess 函数，它位于外部js文件中。！谢谢

＆＃XA;

Answer 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/。这会将点击处理程序应用于shuffle中包含body类的任何内容，即使稍后添加它也是如此。这可以说比$(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>

Answer 2

我的建议是 1. 如果您使用html5，例如＆lt;！DOCTYPE html＆gt;，请改用以下内容：

<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会出现问题。

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

2 个答案: