javascript - 未捕获的 ReferenceError：$ 未定义？

Question

这段代码怎么会抛出

未捕获的 ReferenceError：$ 未定义

以前什么时候好？

$(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>

score 762 · Accepted Answer

您应该首先放置对 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>

score 278 · Accepted Answer

278

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

于 2010-01-15T23:07:10.803 回答

score 153 · Accepted Answer

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

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

该片段不包含HTTP:or属性HTTPS:，src但我的浏览器 FireFox 需要它，因此我将其更改为：编辑：这对我也适用于 Google Chrome

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

然后它起作用了。

score 45 · Accepted Answer

如果您的自定义脚本在 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>

score 42 · Accepted Answer

就我而言，我将.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>

score 29 · Accepted Answer

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

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

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

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

score 28 · Accepted Answer

在启动脚本之前添加库。您可以添加以下任何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 版本，请查看此链接。

在这之后：

<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>

score 19 · Accepted Answer

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

score 19 · Accepted Answer

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

$(document).ready(function() {

至

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

或添加

var $ = jQuery;

前

$(document).ready(function() {

score 18 · Accepted Answer

您ready()在包含 jQuery JavaScript 之前调用该函数。首先参考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晚。

score 16 · Accepted Answer

在我的情况下，我有这个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>

score 16 · Accepted Answer

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

所以我改变了

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

至

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

score 16 · Accepted Answer

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

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

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

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

score 12 · Accepted Answer

我遇到了同样的问题，我通过将 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>

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

score 9 · Accepted Answer

将最新的 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>

score 6 · Accepted Answer

就我而言，这是一个错字，我忘记了反斜杠并且错误地引用了源代码。

前src="/scripts/jquery.js"

后 src="scripts/jquery.js"

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

源文件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()

score 5 · Accepted Answer

这以前发生在我身上。

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

js.sayHello(hello);

当我把它改成

js.sayHello('hello');

有效。

score 5 · Accepted Answer

我有类似的问题。我的测试服务器使用“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 的人有所帮助。

score 4 · Accepted Answer

就我而言，我忘了包括这个：

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

早些时候，我只包括了导致此错误的 jquery-mobile。

score 4 · Accepted Answer

您的 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>

score 4 · Accepted Answer

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

score 4 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

通过参考以下链接参考站点可以对此有一个清晰的认识：

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

回答：在 jQuery 库加载后执行代码
错误“未捕获的 ReferenceError：$ 未定义”背后的最常见原因是在 jQuery 库文件加载之前执行 jQuery 代码。因此，请确保仅在 jQuery 库文件完成加载后才执行 jQuery 代码。

score 3 · Accepted Answer

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

score 3 · Accepted Answer

您还没有引用 jQuery 库。

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

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

score 2 · Accepted Answer

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

@section('section name')

…………

@endsection

score 2 · Accepted Answer

<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 个小时来弄清楚它。

score 1 · Accepted Answer

当我通过移动热点浏览互联网时，我遇到了这个问题。它还在压缩图像并在 body 标签的底部添加了以下脚本

<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img");//-->
</script>

当我连接到正确的 wifi 连接时，一切似乎都对我有用。希望这对某人有所帮助。

score 1 · Accepted Answer

1

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

于 2014-03-10T17:13:35.070 回答

score 1 · Accepted Answer

奇怪的是，我的问题来自 PHP。

REST API 调用失败，之后中断了库的加载。由于失败来自 REST 调用，因此它没有给我一个 php 编译错误。

如果加载 jquery 似乎没问题，也请将此作为选项。

score 1 · Accepted Answer

如果存在网络问题，也可能发生这种情况。这意味着，即使“jquery 脚本”已经就位，并且在使用之前包含在内，由于 jquery 脚本在加载页面时不可访问，因此“$”的定义被视为“未定义的引用”。

用于测试/调试目的 ::您可以尝试在浏览器上访问“jquery-script”网址。如果可以访问，则您的页面应该正确加载，否则它将显示所述错误（或其他与脚本相关的错误）。示例 - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js应该可以在浏览器（或浏览器上下文状态）上访问。

我有类似的问题，我能够在我的 windows-host-browser 中加载 html 页面（使用脚本），但无法在 vm-ubuntu 中加载。解决网络问题，解决问题。

score 0 · Accepted Answer

这是最坏的情况：

一切看起来都很完美。花了几个小时后，我意识到添加到正确位置的 jquery 文件实际上是一个内容为空的文件！

score 0 · Accepted Answer

我在尝试运行不同的 web-socket 示例时遇到了这个问题。

将浏览器指向“ http://localhost:8080/ ”时出现此错误，但准确指向“ http://localhost:8080/index.html ”时没有出现错误，因为在“index.html”中一切正常- 在使用 $.. 之前包含 jquery

不知何故自动转发到 index.html 没有完全工作

score 0 · Accepted Answer

你需要先调用jquery然后调用javascript，因为java脚本依赖于jquery，所以它应该在javascript之前加载，这解决了我的问题。

score 0 · Accepted Answer

根本问题是ReferenceError. MDN 表明/try块catch是适合该工作的工具。就我而言，我收到了付款 sdk/库的未捕获参考错误。以下对我有用。

try {
  var stripe = Stripe('pk_test_---------');
} catch (e) {
    stripe = null;
}

if(stripe){
  //we are good to go now
}

显然，解决方法是在调用其方法之前加载任何 SDK/库，例如 jQuery，但try/catch确实可以防止您的共享 JavaScript 出现错误，以防您在不加载您使用的任何库的页面上运行该共享脚本在页面的子集上。

score -1 · Accepted Answer

就我而言，安装 Windows Server Role Service 'Static Content' 后问题已解决。（操作系统：Windows Server 2008 R2）

如何安装“静态内容”服务器角色服务：

（假设已经安装了“Web服务器”角色）>运行服务器管理器>单击左窗格中的“角色”>单击右窗格中“Web服务器”区域中的“添加角色服务”>选择“静态内容”下Web 服务器/通用 HTTP 功能”> 单击“下一步”> ...

score -2 · Accepted Answer

-2

再次被此咬伤，缺少库源链接。 Google 托管库类似链接

于 2014-12-22T03:33:40.447 回答

score -2 · Accepted Answer

$(document).ready(function() {
                $.getJSON("<?php echo site_url('cadmin/survey/chart_survey_assisten'); ?>", function (json) { 
                    var acctregs = new Morris.Donut({
                                // ID of the element in which to draw the chart.
                                element: 'hadir-chart-bar-assisten',
                                // Chart data records -- each entry in this array corresponds to a point on
                                // the chart.
                                data: json,
                                xkey: 'label',
                                ykeys: ['value'],
                                labels: ['Nilai'],
                                barRatio: 0.4,
                                xLabelAngle: 35,
                                hideHover: 'auto',
                                resize: true
                            });
                });
           });

javascript - 未捕获的 ReferenceError：$ 未定义？

40 回答 40

测试：

生产：

Related

Reference