JQuery - $未定义

时间:2010-02-03 19:57:36

标签: javascript jquery asp.net-mvc

我有一个简单的jquery点击事件

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

和site.master中定义的jquery引用

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

我已经检查过脚本是否正确解析,我能够看到标记并直接在firebug中查看脚本,所以我必须找到它。但是,我仍然得到:

  

$未定义

并没有jquery工作。我也尝试了各种各样的变体,如$(document).ready和jQuery等。

这是.net 3.5上的一个MVC 2应用程序,我确定我真的很密集,google上的任何地方都说要检查文件是否正确引用,我已经检查过并再次检查,请指教! :/

35 个答案:

答案 0 :(得分:505)

该错误只能由以下三种情况之一引起:

  1. 您的JavaScript文件未正确加载到您的页面中
  2. 你有一个拙劣的jQuery版本。这可能是因为有人编辑了核心文件,或者插件可能覆盖了$ variable。
  3. 在页面完全加载之前,您已经运行了JavaScript,因此,在jQuery完全加载之前。
  4. 您应该检查Firebug net 面板,看看文件是否实际正在正确加载。如果没有,它将突出显示为红色并在其旁边显示“404”。如果文件正确加载,则表示问题是数字2。

    确保所有jQuery javascript代码都在代码块中运行,例如:

    $(document).ready(function () {
      //your code here
    });
    

    这将确保在初始化 jQuery之后加载代码。

    要检查的最后一件事是确保在加载jQuery之前没有加载任何插件。插件扩展了“$”对象,所以如果你在加载jQuery核心之前加载插件,那么你将得到你描述的错误。

    注意:如果您正在加载不需要运行jQuery的代码,则无需将其放在jQuery ready处理程序中。该代码可以使用document.readyState分隔。

答案 1 :(得分:186)

可能是在调用jquery脚本之前调用了脚本标记。

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

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

结果为$未定义

将jquery.js放在脚本标记之前,它会起作用;)如下所示:

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

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

答案 2 :(得分:58)

首先,您需要确保加载了jQuery脚本。这可能来自您的网站上的CDN或本地。如果在尝试使用jQuery之前没有先加载它,它会告诉你jQuery没有定义。

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

这可以在HEAD或页面的页脚中,只需确保在尝试调用任何其他jQuery内容之前加载它。

然后您需要使用以下两种解决方案之一

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery); 

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

请注意,很多次 $(文档).ready(function(){// code here}); 不起作用。

答案 3 :(得分:37)

如果jQuery插件调用位于</body>旁边,并且您的脚本在此之前加载,则应该在window.onload事件之后运行代码,如下所示:

window.onload = function() {
  //YOUR JQUERY CODE
}

`

因此,只有在窗口加载后,当所有资产都已加载时,您的代码才会运行。在这一点上,将定义jQuery($)。

如果您使用:

$(document).ready(function () {
  //YOUR JQUERY CODE
});

`

此时尚未定义$,因为它是在加载jQuery之前调用的,并且您的脚本将在控制台的第一行上失败。

答案 4 :(得分:26)

我做了同样的事情,发现我有很多

type="text/javacsript"

所以他们正在加载,但没有进一步暗示为什么它不起作用。毋庸置疑,正确的拼写修正了它。

答案 5 :(得分:20)

在视图和主布局中使用脚本部分

将视图中定义的所有脚本放在视图的“脚本”部分中。这样,您可以在加载所有其他脚本后加载主布局。这是启动新MVC5 Web项目时的默认设置。对早期版本不确定。

<强>查看/富/ MyView.cshtml:

// The rest of your view code above here.

@section Scripts 
{ 
    // Either render the bundle defined with same name in BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...or hard code the HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {

        // Do your custom javascript for this view here. Will be run after 
        // loading all the other scripts.            
      });
    </script>
}

<强>查看/共享/ _Layout.cshtml

<html>
<body>
    <!-- ... Rest of your layout file here ... -->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

请注意脚本部分如何在主布局文件中最后呈现。

答案 6 :(得分:10)

确保你真的加载了jquery 这是 jquery - 它是ui!

  <script language="JavaScript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js">
  </script>

这是jquery的正确脚本源:

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

答案 7 :(得分:9)

如上所述,由于$ variable的冲突而发生。

我通过为jQuery保留一个没有冲突的辅助变量解决了这个问题。

var $j = jQuery.noConflict();

然后在任何地方使用

$j( "div" ).hide();

可以找到更多详细信息here

答案 8 :(得分:7)

您使用的是其他任何JavaScript库吗?如果是这样,您可能需要在兼容模式下使用jQuery:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

答案 9 :(得分:7)

这意味着您的jQuery库尚未加载。

拉动jQuery库后可以移动代码。

或者你可以使用这样的东西

window.onload = function(){
  // Your code here
};  

答案 10 :(得分:4)

当我拼错了jQuery引用时,我得到了相同的错误消息,而不是type="text/javascript"我输入了“... javascirpt”。 ;)

答案 11 :(得分:4)

听起来jQuery没有正确加载。您使用的是哪个来源/版本?

或者,它可能是命名空间冲突,因此请尝试显式使用jQuery而不是使用$。如果可行,您可以使用noConflict来确保使用$的其他代码不会中断。

答案 12 :(得分:4)

经过一些测试,我发现了一个快速的解决方案, 您可以在索引页面的顶部添加:

<script>
$=jQuery;
</script>

它工作得非常好:))

答案 13 :(得分:3)

该错误意味着jQuery尚未加载到页面上。使用$(document).ready(...)或其任何变体都没有用,因为$是jQuery函数。

使用window.onload应该在这里工作。请注意,只能为window.onload分配一个功能。为了避免丢失原始的onload逻辑,你可以像这样装饰原始函数:

originalOnload = window.onload;
window.onload = function() {
  if (originalOnload) {
    originalOnload();
  }
  // YOUR JQUERY
};

这将执行最初分配给window.onload的功能,然后执行// YOUR JQUERY

有关装饰器模式的更多详细信息,请参阅https://en.wikipedia.org/wiki/Decorator_pattern

答案 14 :(得分:2)

我使用Url.Content并且永远不会有问题。

<script src="<%= Url.Content ("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>

答案 15 :(得分:2)

我遇到了同样的问题并通过使用解决了

document.addEventListener('DOMContentLoaded', () => {
 // code here
});

答案 16 :(得分:2)

在解决方案中提到 - “最后要检查的是确保在加载jQuery之前没有加载任何插件。插件扩展了”$“对象,所以如果你在加载jQuery核心之前加载一个插件,那么你将得到你描述的错误。“

为了避免这种情况 -

许多JavaScript库使用$作为函数或变量名,就像jQuery一样。在jQuery的情况下,$只是jQuery的别名,因此所有功能都可以在不使用$的情况下使用。如果我们需要在jQuery旁边使用另一个JavaScript库,我们可以通过调用$ .noConflict()将$的控制权返回给另一个库:

答案 17 :(得分:1)

我没有明显的理由曾经遇到过这个问题。当我在aspnet开发服务器上运行时,它发生在本地。它一直在工作,我把一切都恢复到以前一直在工作的状态,但仍然无效。我查看了chrome调试器,并且jquery-1.7.1.min.js已经加载没有任何问题。这一切都非常令人困惑。我仍然不知道问题是什么,但关闭浏览器,关闭开发服务器,然后再次尝试将其整理出来。

答案 18 :(得分:1)

  1. 检查包含的jquery文件的确切路径。

    <script src="assets/plugins/jquery/jquery.min.js"></script>

  2. 如果您在页面底部添加此内容,请在此声明下方调用JS函数。

    1. 使用此代码测试

      进行检查
      <script type="text/javascript">
      /***
       * Created by dadenew
       * Submit email subscription using ajax
       * Send email address
       * Send controller
       * Recive response
       */
      $(document).ready(function() { //you can replace $ with Jquery
      
        alert( 'jquery working~!' );
      });
      

    2. 和平!

答案 19 :(得分:1)

只需将jquery url放在jquery代码的顶部

像这样 -

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

答案 20 :(得分:1)

我遇到了同样的问题,因为我对jQuery.js的引用不在标签中。一旦我切换了,一切都开始工作了。

安东尼

答案 21 :(得分:0)

我遇到了同样的问题,并通过以下步骤解决了。 脚本的顺序应如下所述

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

这个序列对我的代码不正确,我按照上面的方法更正了这个问题,它解决了我的 Jquery 未定义问题。

答案 22 :(得分:0)

我在这里找不到的东西,但确实发生在我身上。确保您没有包含jQuery slim 版本,因为该版本的jQuery库不包含Ajax功能。

结果是“ $”有效,但是$ .get例如返回一条错误消息,指出该函数未定义。

解决方案:改为包含完整版本的jQuery。

答案 23 :(得分:0)

这是解决此问题的常见问题,您必须检查一点

  1. 包括主Jquery库
  2. 检查跨浏览器问题
  3. 在TOP的jQuery代码上添加库
  4. 检查CDN可能被阻止。

此博客click here

中提供了详细信息

答案 24 :(得分:0)

如果script标签具有defer属性,则会显示错误

  

未捕获的ReferenceError:未定义$

,并且必须从defer标记中删除属性script

答案 25 :(得分:0)

我们遇到了同样的问题....但我不小心检查了文件夹属性并设置了一些内容......

您必须检查您正在访问的每个文件夹的属性..

  1. 右键单击文件夹
  2. '权限'标签
  3. 设置文件夹访问权限:  所有者:创建和删除文件  GROUP:访问文件  其他:访问文件
  4. 我希望这是解决方案......

答案 26 :(得分:0)

有一种方法可以让它在其余代码运行之前自动加载javascript。

进入Views \ Shared_Layout.html并添加以下内容

<head>
  <*@ Omitted code*@>
  <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>

答案 27 :(得分:0)

我有一个非常类似的问题。在我的C#MVC应用程序中,JQuery没有被识别。我需要将@Scripts.Render(&#34;〜/ bundles / jquery&#34;)从我的_Layout.cshtml文件的底部移到该部分的头部。如果您使用的是visual studio,还要确保已将Jquery作为Nuget包使用!

<head>
    @Scripts.Render("~/bundles/jquery")
</head>

答案 28 :(得分:0)

我有同样的问题,没有案例解决我的问题。唯一对我有用的东西,它放在Site.master文件的下一个:

<script src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/bootstrap/js/bootstrap.min.js") %>" type="text/javascript"></script>

使用src =“&lt;%= ResolveUrl(”“)...内容页面中jQuery的加载是正确的。

答案 29 :(得分:0)

在asp.net中使用jQuery时,如果您正在使用母版页并在那里加载jquery源文件,请确保在所有jquery脚本引用之后都有标题contentplaceholder。

我遇到的问题是,使用该母版页的任何页面都会返回'$ is not defined',因为错误的顺序是在创建jquery对象之前运行客户端代码。所以请确保你有:

<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-VERSION#.js"></script>
    <asp:ContentPlaceHolder id="Header" runat="server"></asp:ContentPlaceHolder>
</head>

这样代码将按顺序运行,您将能够在子页面上运行jQuery代码。

答案 30 :(得分:0)

看来,如果您在同一文件夹下或在html文件所在的某些子文件夹下找到jquery.js文件,Firebug问题就解决了。例如,如果您的html位于C:/ folder1 /下,那么您的js文件也应位于C:/ folder1 /(或C:/ folder1 / folder2等)下的某处,并在html doc中进行相应的处理。希望这有帮助。

答案 31 :(得分:0)

我遇到了同样的问题,无法弄清楚导致它的原因。我最近将我的HTML文件从日语转换为UTF-8,但我没有对脚本文件做任何事情。不知怎的,jquery-1.10.2.min.js在这个过程中被破坏了(我仍然不知道如何)。将jquery-1.10.2.min.js替换为原始修复它。

答案 32 :(得分:0)

就我而言,我指的是Google托管的JQuery。它被正确包含,但我在HTTPS页面上并通过HTTP调用它。一旦我解决了问题(或允许不安全的内容),它就会被解雇。

答案 33 :(得分:-1)

你只需在页面开头添加

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

并在任何浏览器地址栏中检查您的src链接,如果您获得了一些代码,那么这将适合您。 阿西

答案 34 :(得分:-1)

在没有结果的情况下尝试了所有内容之后,我只是通过将脚本src标记从主体移动到头部来解决问题