Question

这可能是我在使用JavaScript编程时遇到的最奇怪的事情，我无法在任何地方找到解决方案。

所以我所做的就是创建一个html文档和一个外部链接到它的JS文件。当我尝试从JS文件中的页面引用元素时，它没有做任何事情，并且控制台中没有任何错误。这是一个例子：

＆＃13;

$('#box').click(function() {
	alert('test');
})

＆＃13;

<html>
<head>
<script src="script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>

<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>

</body>
</html>

＆＃13;

它在小提琴中表现得非常好，但在我的机器上它并没有。还尝试在Google云端硬盘上托管，没有。我在另一台计算机上打开它，nada。这是实时页面：

https://7568fa8ec856c21498701e0edd220440c5c75264.googledrive.com/host/0B4rWYiw5-JZtfm1wNE1iMkY1b0tuaXFnaUZmaWFsSU5XLXQtaTh5U2ozVFB0NHgyVXpOOW8/test.html

我不明白！？！？

Answer 1

如果您定义HTML如下，它的行为如何：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
  </head>
  <body>
    <div id="box" style="width: 200px; height: 100px; background: #000;">
     </div>
  </body>
  <script src="script.js" type="text/javascript"></script>
</html>

实际上建议在文档正文后包含自定义JavaScript。除了解决您的问题之外，HTML将在JavaScript执行完成之前显示在页面上。

Answer 2

如果scripts.js正在使用jquery，则需要在加载scripts.js

之前加载jquery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>

Answer 3

您有两个不同的问题：

首先，您必须在脚本之前加载jQuery，以便在脚本运行时可用。因此，请切换两个脚本标记的顺序以解决该问题。
在加载DOM之前，您的脚本无法运行。当您在<head>标记中运行它时，它在DOM加载之前运行，因此页面在那时是空的，因此您的代码无法找到安装点击处理程序的正确元素。有几种方法可以解决这个问题。最简单的方法是将所有脚本标记移至</body>之前。这将确保在脚本运行时DOM可用，并且您不必做任何其他特殊操作。

以下是适用的HTML修订版：

<html>
<head>
</head>
<body>

<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

您也可以只切换两个脚本的顺序并将其保留在<head>标记中，然后将脚本更改为：

$(document).ready(function() {
    $('#box').click(function() {
        alert('test');
    })
});

在jQuery中，$(document).ready(fn)构造指示jQuery仅在DOM完成加载时调用特定函数。这允许您将此初始化脚本放在任何位置，jQuery将确保在DOM准备好之前不会调用您的回调函数。

外部JS文件无法识别html中的元素

3 个答案: