Question

我正在尝试调试异常：

thumbnails.js：1未捕获的ReferenceError：$未定义（...）

我不确定我是否遗漏了涉及jQuery的其他内容。我添加了依赖文件，这就是我认为我应该需要的。我相信我所包含的代码也是正确的。

我在下面提供了一些HTML和JavaScript代码。

来自inventory.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Rob's Rock 'n' Roll Memorabilia</title>
    <link rel="stylesheet" href="css/default.css" />
    <script src="scripts/utils.js"></script>
    <script src="scripts/thumbnails.js" type="text/javascript"></script>
    <script src="scripts/jquery-3.1.1.slim.min.js"></script>
</head>

来自thumbnails.js

  $(window).ready(function () {
        initPage();
  });

Answer 1

您的加载顺序错误。在加载顺序中将JQuery脚本移动到缩略图脚本上方。

Answer 2

包含脚本的顺序错误

我假设util.js，thumbnails.js需要jquery才能工作。

但您已在其后添加jquery。 jquery需要包含在开头

<script src="scripts/jquery-3.1.1.slim.min.js"></script>
<script src="scripts/utils.js"></script>
<script src="scripts/thumbnails.js" type="text/javascript"></script>

Answer 3

HTML从上到下加载，脚本也以相同的顺序加载，并在加载后立即执行。

这里先加载thumbnails.js，然后加载jquery.js，首先加载thumbnail.js，然后使用jQuery的$对象/函数，因为jquery尚未加载$不可用，因此您在页面上看到此错误。请注意HTML中脚本标记的顺序。

其次，我不确定这个Thumbnail.js，它是如何工作的但它是$(document).ready(function () { //your code here });没有什么作为窗口就绪事件，它可能是窗口加载事件。

调试未捕获的参考错误

3 个答案: