未捕获的 ReferenceError $ 未定义答案

【问题标题】：Uncaught ReferenceError $ is not defined未捕获的 ReferenceError $ 未定义
【发布时间】：2012-07-10 01:43:06
【问题描述】：

我对 JavaScript 非常陌生（几个小时前才开始尝试让脚本正常工作）。我浏览了一些关于 W3 的教程，当我将 'hello world' 代码直接粘贴到我的 HTML 中时，它可以正常工作，但是我遇到了脚本问题（我遇到了其他脚本的问题也可以，但我不确定我做错了什么）。

我有这个code，我想在我的 HTML 中进行测试，我复制了 HTML，它看起来一样，然后我在我的静态文件夹中创建了一个名为 edit.js 的文件并将 JavaScript 复制到其中（就像如图所示）。它在页面上没有任何错误，但是当我单击它时没有任何反应。我尝试在其中粘贴 W3 'hello world' 代码，并且该代码有效，但此脚本无效。

我尝试检查 Chrome 中的代码，这就是我看到上述错误的地方（在资源选项卡下）。我可以使用 Chrome 打开 js 文件，这让我认为 js 文件可以访问并正确指向，但我不确定如何让它工作。我使用 Jinja2 作为我的模板引擎来呈现 HTML，并且在我的标题中我有：

<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>

在我的主模板（在所有页面上呈现的模板）中，我有：

<script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

edit.js：

（即使将它直接放在我想使用它的页面上的脚本标记中也不起作用）

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});

HTML：

（它嵌入到更大的页面中）

    <head>
        <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
    </head>
... my html code..
        <div id="wrapper">
           <div id="container">
              <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
              <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
           </div>
        </div>

我从来没有能够成功运行 W3 上还没有的 JavaScript。即使我看到网上有人说他们对他们来说工作得很好，我也会遇到其他脚本同样的问题。我需要做任何额外的事情来完成这项工作吗？

我的两个问题是：

我做错了什么？
因为 Javascript 在出现问题时似乎无法正常工作，有没有办法获取错误或有关实际问题的信息？

我阅读了Uncaught ReferenceError: $ is not defined? 并且在过去的一个小时里一直在尝试解决这个问题，但看不到我的问题。

【问题讨论】：

您确定jQuery 包含在之前 edit.js吗？
@SiGanteng 是的。它在我的主模板中应该首先呈现，但以防万一我没有在我的 edit.js 调用上方添加它（我只是复制了上面的 googleapis 脚本链接我在上面发布的edit.js）。仍然没有运气:-(
您能否将包含<script> 的HTML sn-p 发布到您的问题中？
@SiGanteng 我刚刚发布了html部分..
嗯，好吧，我觉得很好：s。顺便问一下，您是从 w3schools.com 选择 language 属性吗？它已被弃用。作为旁白：w3fools.com

标签： javascript jquery html

【解决方案1】：

首先你需要先放置 jQuery 脚本标签。

其次，你需要做以下事情之一：

将您的代码放入此函数中：

$(document).ready(function(){/*CODE HERE*/});

或者像这样：
```
$(function(){
    /*CODE HERE*/
});
```

DOM 需要准备好才能使用它。将代码放在在 DOM 的就绪事件上执行的匿名函数中就是这样做的。

编辑：

$(function(){
   $('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
   $('#savevalue').click(function(e){
     var showNew = $('#changevalue').val();
     $('#altervalue').hide();
     $('#storedvalue').show();
     $('#storedvalue span').text(showNew);
   });
});

【讨论】：

对不起，我不完全理解。不是用 $(functionname).. 包裹了 edit.js 吗？
不完全是，将所有代码放在上面的块之一中。当 jQuery 准备好时，使用上面的代码会触发一个函数。您正在尝试在 jQuery 准备好之前使用它。我 100% 确定这是您的问题。
哇，谢谢你..它成功了！！！我将它包装在函数标签中，它起作用了！我认为我以前从未这样做过，我只是将主代码直接复制并粘贴到 .js 文件中。我将查看我的其他文件并尝试执行此操作。非常感谢。
对不起，愚蠢的问题..当我可以与我已经知道的东西进行比较时，我会学得更好..$(function(){ 类似于 python 的def function: 吗？（我想我需要坐下来读一本关于 javascript 的书）
是的，因为您在函数范围内编写代码。不，这里真正发生的是您需要确保完全加载 JQuery 脚本，然后才能使用 $ 对象执行代码。 docs.jquery.com/Tutorials:Introducing_$(document).ready()查看此链接以进一步阅读。

【解决方案2】：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

jQuery 的脚本标签应该在您的自定义 javascript 之前。

关注edit.js

<script type="text/javascript" src="static/edit.js"></script>

【讨论】：

我只是这样做了，错误不再出现在 chrome 中，但链接（编辑按钮）仍然不起作用。
您可以删除已弃用的language 属性；只需type="text/javascript" 就足够了。

【解决方案3】：

尝试删除语言属性..有时对我有用。现在已经过时了..我认为

【讨论】：

如果他们使用带有 TextMate 或 Sublime Text 的自动完成标签，很多人会遇到这种情况，因为许多提供的插件和包仍然将语言属性添加到脚本标签。如果您的 JS 标记如下所示：<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8" async defer></script> 我发现删除它可以解决问题：<script... async defer></script>

【解决方案4】：

您需要先包含 jquery 才能使用它。

【讨论】：