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

【问题标题】：Chrome: Uncaught ReferenceError: $ is not definedChrome：未捕获的 ReferenceError：$ 未定义
【发布时间】：2012-05-26 09:26:45
【问题描述】：

我在网页中使用 jQuery。在 Internet Explorer 中使用 $ 时，它可以正常工作。在 Chrome 或 Firefox 中引用 $ 时失败并出现错误：

Uncaught ReferenceError: $ is not defined.

截图：

用我的源代码：

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
      function divClick(sender, event)
      {
//       var chk = $(sender).find("input").first()[0];
         var chk = jQuery(sender).find("input").first()[0];
         alert("Works in ie");
      }
   </script>
</head>
<body>

<div onclick="divClick(this, event)">
    <input type="checkbox">
</div>

</body>
</html>

注意：浏览器被定向到本地文件系统上的文件：

更新：尝试将其更改为jQuery。

更新：Chrome 找到 jquery 文件（即没有 404）：

【问题讨论】：

检查jquery-1.7.2.min.js是否与html在同一个文件夹中。 $ is not defined 是不包含 jQuery 库时出现的错误。
你能举例说明如何将我的函数包装在一个准备好的dom中吗？以及如何将点击侦听器移动到js？看看我下面的例子。
我遇到了同样的错误。就我而言，问题是我的页面是通过 https 访问的，而我的 jquery 脚本源是通过 http 访问的。在脚本源中添加“s”解决了我的问题。

标签： jquery firefox google-chrome

【解决方案1】：

这个问题只是为了记录 Chrome 和 Firefox 中的错误：

Html File encoding           IE9      Chrome
=========================    =======  ======
Windows-1252                 Works    Works
UTF-8 (without BOM)          Works    Works 
UTF-8 (with BOM EFBB)        Works    Works 
UTF-16 (with LE BOM FFFE)    Works    Fails
UTF-16 (with BE BOM FEFF)    Works    Fails

大概 Chrome（和 Firefox）假定单独的 script 文件与 html 文件具有相同的编码。

Chrome 然后尝试将jquery-1.7.2.js 读取为 UTF-16，并震惊地发现该文件是纯 (Windows-1252) 垃圾。

【讨论】：

【解决方案2】：

检查jquery-1.7.2.min.js的路径是否正确。如果使用 firefox 或 chrome 开发人员工具，您可以检查 firebug 以查看文件是否正在下载。你很可能会得到 404 的 jQuery 文件，因为 $ 在页面上是未定义的，它是 jQuery 对象的别名。

【讨论】：

【解决方案3】：

你可以在 Firefox 和 Chrome 中使用 Javascript 得到这个错误：

Uncaught ReferenceError: $ is not defined.

如果你像这样包含 jquery：

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

并且您的服务器配置为不允许在运行时下载和运行 javascript 内容，然后您会收到上述错误。看看整个错误：

[blocked] The page at https://yoursite.com/blah# ran insecure content 
from http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js.
/blah#:1
Uncaught ReferenceError: $ is not defined

这意味着您的网络服务器不允许动态加载 javascript 内容。这是一个安全风险，因为有人可能会在其中注入邪恶的东西供您下载并拥有您的服务器。

【讨论】：

【解决方案4】：

以上都不适用于 Chrome 49 上的我。我必须将类型指定为“应用程序/javascript”，如下所示：

<script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script>

使用“text/javascript”不起作用。

【讨论】：

它真的很有魅力 :) 尝试了很多解决方案，但找不到这样的解决方案

【解决方案5】：

试试：

var chk = jQuery(sender).find("input").first()[0];

【讨论】：

更新了问题以包含该问题。

【解决方案6】：

你的函数需要包装在一个准备好的dom中：

$(function(){

  function divClick(sender, event)
  {
     var chk = $(sender).find("input").first()[0];
     alert("Works in ie");
  }

});

这将允许该函数仅在页面加载后触发。您的脚本也应该在结束 HTML 标记之前加载。不是所有的顶部。这将允许页面更快地加载 HTML 和 css，因为它不必等待 JS 加载。

还要确保您的 HTML 具有正确的 jQuery 路径。

最后一件事，

如果您的点击侦听器位于内联 HTML 中，请尝试将其移至 JS。这只是一种更清洁、更有条理的处理方式。

$('.clickMe').click(function(){
    //do stuff here
})

【讨论】：

你能举一个例子来说明如何将我的函数包装在一个准备好的dom中？以及如何将点击监听器移动到js?
他们在那里 dom 准备好了 $(function(){ }) 它是 jQuery 简写版本。对于单击事件，请参考此 jsfiddle。 jsfiddle.net/QgeD9

【解决方案7】：

我在 Jquery 代码中通过 id 分配了所有内容，而不是 html 中的 onclick。

我不确定您是否想知道是否选中了 div 或是否选中了复选框。如果点击了div，我将输入检查放入代码中并注释掉代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
// $('#divid').unbind("click").click(function(){
$('#someid').unbind("click").click(function(){
if($(this).is(':checked')){
alert("checked");
}else{
alert("not checked");
}
});
});
</script>

</head>
<body>

<div id="divid"><input type="checkbox" id="someid"></div>

</body>
</html>

【讨论】：