未捕获的 ReferenceError：$ 未定义？答案

【问题标题】：Uncaught ReferenceError: $ is not defined?未捕获的 ReferenceError：$ 未定义？
【发布时间】：2020-03-07 16:02:48
【问题描述】：

这段代码怎么会抛出一个

未捕获的引用错误：$ 未定义

以前什么时候可以？

$(document).ready(function() {
    $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
    $('#featuredvid > ul').tabs();
});

标签中的结果不再关闭。

标头中引用了jQuery：

<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>

【问题讨论】：

把这个放在上面
在我的例子中，JQuery 在页脚部分，所以首先调用了 JS 函数。
这能回答你的问题吗？ ReferenceError: $ is not defined

标签： javascript jquery referenceerror

【解决方案1】：

您应该首先放置对 jquery 脚本的引用。

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

【讨论】：

只是为了确保这一点很清楚：您不能将 jquery-ui 的脚本引用放在 jquery 脚本本身之前。这就是解决我的问题的原因：首先是 jquery-x.x.x.min.js，然后是 jquery-ui-xxxxxx.js。
2 年后，答案仍然没有“勾选”）This articles 描述了这个错误发生时的一个和 4 个更常见的情况。

【解决方案2】：

您在包含 jQuery JavaScript 之前调用了 ready 函数。先参考jQuery。

【讨论】：

@RamSharma 实际上，这是正确的答案。你不需要任何其他东西来解决这个问题。

【解决方案3】：

这就是为我解决的问题。最初我去谷歌并在他们的 CDN 页面上复制并粘贴了他们为 jQuery 建议的 sn-p：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

sn-p 在src 属性中不包含HTTP: 或HTTPS:，但我的浏览器FireFox 需要它，因此我将其更改为：编辑：这对我也适用于谷歌浏览器

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

然后成功了。

【讨论】：

【解决方案4】：

如果您的自定义脚本在 jQuery 插件加载到浏览器之前加载，则可能会出现此类问题。因此，在调用 jQuery 插件后，请始终保留您自己的 JavaScript 或 jQuery 代码，因此解决方案是：

首先将链接添加到托管在 GoogleApis 上的 jQuery 文件或本地 jQuery 文件，您将从 http://jquery.com/download/ 下载并托管在您的服务器上：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

或任何 jQuery 插件。然后把你的自定义脚本文件链接或者代码：

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

【讨论】：

【解决方案5】：

在我的情况下，我将 .js 文件放在 jQuery 脚本链接之前，将 .js 文件放在 jQuery 脚本链接之后解决了我的问题。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>

【讨论】：

【解决方案6】：

好的，我的问题有所不同 - 它是 Chrome 中的 Document Security 模型。

看看这里的答案，很明显我在调用$(document).ready() 等函数之前没有加载我的jquery 文件。但是，它们都处于正确的位置。

在我的情况下，这是因为我通过安全的 HTTPS 连接访问内容，而页面试图从谷歌等下载 CDN 托管数据。解决方案是将它们存储在本地，然后直接包含而不是比每次都来自 CDN。

编辑：另一种方法是将所有 CDN 托管的内容链接为 https:// 而不是 http:// - 然后模型不会抱怨。

【讨论】：

【解决方案7】：

在启动脚本之前添加库。您可以添加以下任何 CDN 来启动它。

谷歌：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

微软

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

jQuery

如果您想要任何其他 Jquery cdn 版本，请查看 link。

之后：

<script type="text/javascript">
$(function(){
    //your stuff
});
or
$(document).ready(function(){
    //your stuff
});    
</script>

WordPress：

<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
     //your stuff
});
</script>

【讨论】：

【解决方案8】：

如果在wordpress中，可能需要更改

$(document).ready(function() {

到

jQuery(document).ready(function($){

或添加

var $ = jQuery;

之前

$(document).ready(function() {

【讨论】：

【解决方案9】：

我遇到了完全相同的问题，以上这些解决方案都没有帮助。但是，我只是在.js 文件之后链接了.css 文件，问题就奇迹般地消失了。希望这会有所帮助。

【讨论】：

【解决方案10】：

在包含 jQuery JavaScript 之前，您正在调用 ready() 函数。先引用jQuery。

如果您在 ASP.NET MVC 中，您可以指定何时呈现您的 JS 代码，方法是：

1, 在你的page.cshtml 中将你的<script> 标签包装成一个部分，并给它一个名字，常用的名字是'scripts'：

@section scripts {
    <script>
        // JS code...
    </script>
}

2、在你的_Layout.cshtml页面中添加@RenderSection("Scripts", required: false)，一定要在引用Jquery源之后再放，这样会让你的JS代码渲染得比Jquery晚。

【讨论】：

【解决方案11】：

在我的情况下，我遇到了这个 referenceError，因为脚本调用的顺序是错误的。通过更改顺序解决了这个问题：

<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>

到

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>

【讨论】：

【解决方案12】：

我想尝试使我的脚本异步。然后我忘了它，当我上线时，[custom].js 文件在 jQuery.js 之前只加载了 50% 的时间。

所以我改变了

<script async src="js/script.js"></script>

到

<script src="js/script.js"></script>

【讨论】：

【解决方案13】：

在使用 $ 或 jQuery 的脚本之前添加 jQuery 库，以便在脚本中识别 $。删除头上的标签脚本并结束bady

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

然后先在文件js中写脚本添加

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

【讨论】：

危险：此处使用的 jQuery 版本存在已知安全问题，不受支持。从 jQuery 网站获取最新版本。

【解决方案14】：

我遇到了同样的问题，我通过将 jQuery 放在我的代码中所有 javascript 代码的顶部来解决。

类似这样的：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>

希望将来可以帮助一些人。

【讨论】：

【解决方案15】：

将最新的 jquery cdn 放在主 html 页面的顶部

如果您的主 html 页面是 index.html

像这样将 jquery cdn 放在这个页面的顶部

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2").hide();
  });
});
</script>
</head>
<body>

<h2>This will hide me</h2>


<button>Click me</button>

</body>
</html>

【讨论】：

【解决方案16】：

如果您在 .Net 中执行此操作并且正确引用了脚本文件并且您的 jQuery 看起来不错，请确保您的用户可以访问该脚本文件。我正在从事的项目（一位同事）让他们的 web.config 拒绝访问匿名用户。我正在处理的页面可供匿名用户访问，因此他们无权访问脚本文件。将以下内容放入 web.config 中，一切正常：

  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>
  </location>

【讨论】：

【解决方案17】：

在我的情况下，这是一个错字，我忘记了反斜杠并且错误地引用了源代码。

src="/scripts/jquery.js"之前

在src="scripts/jquery.js"之后

【讨论】：

【解决方案18】：

源文件jquery-1.2.6.min.js未调用jQuery命令$()早于<..src='jquery-1.2.6.min.js'>执行。

请先运行<.. src="/js/jquery-1.2.6.min.js..">，确保src路径正确，然后执行jquery命令

$(document).ready(function()

【讨论】：

【解决方案19】：

这件事以前发生在我身上。

原因是我正在使用 JS 将 android 连接到 webview。我发送了一个不带引号的参数。

js.sayHello(hello);

当我把它改成

js.sayHello('hello');

成功了。

【讨论】：

我不知道没有引号的参数是什么意思......听起来你有一个参考错误。
我在 Freemarker 中遇到了问题，原因是没有单引号，所以该值被视为不是字符串，而是变量

【解决方案20】：

我有类似的问题。我的测试服务器使用“http”运行良好。但是它在具有 SSL 的生产中失败了。

因此在生产中，我添加了“HTTP”而不是“HTTP”，而在测试中，我保留了“HTTP”。

测试：

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

生产：

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

希望这对正在使用 wordpress 的人有所帮助。

【讨论】：

【解决方案21】：

您的 JavaScript 文件丢失，因此发生了此错误。只需在 <head> 标记内添加 JavaScript 文件。看例子：

<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />

或在标签中添加以下代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【讨论】：

【解决方案22】：

在我的情况下，我忘了包括这个：

 <script src ="jquery-2.1.1.js"></script>

之前我只包含导致此错误的 jquery-mobile。

【讨论】：

【解决方案23】：

以下两种情况也会出现该错误。

HTML 文件中缺少@section 脚本元素
访问 DOM 元素时出错。例如，DOM 元素的访问被称为 $("js-toggle") 而不是 $(".js-toggle")。实际上是缺少期间

所以要遵循 3 件事 - 检查是否添加了所需的脚本，检查它是否按要求的顺序添加，以及您的 Java 脚本中的第三个语法错误。

【讨论】：

【解决方案24】：

我修改了脚本标记以指向正确的内容，并将脚本顺序更改为编辑器中的正确顺序。但完全忘记保存更改。

【讨论】：

【解决方案25】：

哇！我的标签中有混合引号，导致 jquery 引用中断。在 Chrome 中进行检查让我看到文件没有正确链接。

【讨论】：

【解决方案26】：

您还没有引用 jQuery 库。

您需要在 HTML 中包含与此类似的一行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

【讨论】：

【解决方案27】：

首先在索引文件中包含jQuery CDN（或jQuery ref）。在包含您的 JS 文件以确保我们正在访问 jQuery 之前。以下几行对我有用

可以通过参考以下链接得到一个清晰的概念参考网站：

https://www.tutorialrepublic.com/faq/how-to-fix-dollar-is-not-defined-error-in-jquery.php

答案：jQuery 库加载后执行代码
错误“Uncaught ReferenceError: $ is not defined”背后的最常见原因是在加载 jQuery 库文件之前执行 jQuery 代码。因此，请确保您仅在 jQuery 库文件完成加载后才执行 jQuery 代码。

【讨论】：

【解决方案28】：

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

我有类似的问题，你知道吗，这是因为我在android设备webview中测试时网络断开我没有意识到这一点，而本地js加载没有问题，因为它不需要网络。这看起来很荒谬，但它浪费了我大约 1 个小时来弄清楚它。

【讨论】：

【解决方案29】：

如果你在忘记用 : 包围代码时发现刀片文件中出现错误：

@section('section name')

.......

@endsection

【讨论】：

【解决方案30】：

我遇到了类似的问题，这是因为我在样式表链接上缺少一个结束 >。

【讨论】：