未捕获的ReferenceError:$未定义?

问题描述 投票:563回答:37

为什么这段代码会抛出一个

未捕获的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>
javascript jquery referenceerror
37个回答
638
投票

您应该首先将引用放到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>

13
投票

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

6
投票

如果您在.Net中执行此操作并正确引用脚本文件并且jQuery看起来很好,请确保您的用户可以访问脚本文件。我正在进行的项目(同事)让他们的web.config拒绝访问匿名用户。我正在处理的页面可供匿名用户访问,因此他们无法访问脚本文件。将以下内容放入web.config中,一切都在世界上:

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

6
投票

我有同样的问题,我解决了将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>

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


5
投票

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

5
投票

这件事发生在我之前。

原因是我将android连接到带有JS的webview。我发送了一个没有引号的参数。

js.sayHello(hello);

当我改变它

js.sayHello('hello');

有效。


5
投票

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

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

src="scripts/jquery.js"之后


4
投票

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

4
投票

错误也会在以下两种情况下发生。

  1. HTML文件中缺少@section scripts元素
  2. 访问DOM元素时出错。例如,DOM元素的访问被称为$(“js-toggle”)而不是$(“。js-toggle”)。实际上这段时间不见了

因此需要遵循3项内容 - 添加检查所需的脚本,检查是否按所需顺序添加了脚本,以及Java脚本中的第三个语法错误。


3
投票

卫生署!我的标签中有混合引号,导致jquery引用中断。在Chrome中进行检查后,我发现文件没有正确链接。


201
投票

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


3
投票

在我的情况下,我忘了包括这个:

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

早些时候我只包括jquery-mobile导致了这个错误。


3
投票

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

如果您使用的是ASP.NET MVC,则可以通过执行以下操作来指定应该何时呈现JS代码:

1,在你的page.cshtml中将你的<script>标签包装成一个部分,并给它一个名字,使用的通用名称是'脚本':

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

2,在你的_Layout.cshtml页面中添加@RenderSection("Scripts", required: false),确保在引用Jquery源之后将它放入,这将使你的JS代码比Jquery更晚呈现。


3
投票

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


2
投票

我有一个类似的问题,因为我在样式表链接上错过了一个结束>。


2
投票
<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个小时来搞清楚它。


1
投票

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

REST API调用失败,之后它正在破坏库的加载。由于失败来自REST调用,它没有给我一个php编译错误。

如果加载jquery似乎没问题,也可以选择此选项。


1
投票

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

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

当我连接到正确的wifi连接时,所有似乎都找不到我的工作。希望这能有所帮助。


1
投票

我有类似的问题。我的测试服务器与“http”工作正常。然而,它在生产中失败了,它有SSL。

因此在生产中,我添加了“HTPPS”而不是“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的人。


1
投票

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

FOR TEST / DEBUG PURPOSES ::您可以尝试在浏览器上访问“jquery-script”URL。如果它是可访问的,您的页面应该正确加载,否则它将显示所述错误(或其他脚本相关的错误)。示例 - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js应该可以在浏览器(或浏览器上下文站点)上访问。

我有类似的问题,我可以在我的windows-host-browser中加载html页面(使用脚本),但无法加载vm-ubuntu。解决网络问题,解决了问题。


1
投票
var $ = jQuery;
jQuery(document).ready(function($){

103
投票

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

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

该片段不包含HTTP:属性中的HTTPS:src,但我的浏览器FireFox需要它,因此我将其更改为:edit:这对我来说也适用于Google Chrome

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

然后它奏效了。


0
投票

根问题是ReferenceErrorMDN indicates认为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不会出现错误,以防你在不加载你在页面子集上使用的任何库的页面上运行该共享脚本。


42
投票

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

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

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

37
投票

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

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

25
投票

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

看看这里的答案,显然我在调用$(document).ready()等函数之前不知何地加载了我的jquery文件。但是,他们都处于正确的位置。

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

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


23
投票

在启动脚本之前添加库。您可以添加以下任何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>

19
投票

如果是在wordpress中,可能需要更改

$(document).ready(function() {

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

或添加

var $ = jQuery;

之前

$(document).ready(function() {

15
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.