Ian Boyd Ian Boyd - 8 months ago 24
Javascript Question

Chrome: Uncaught ReferenceError: $ is not defined

I am using jQuery in a web page. When using

in Internet Explorer it works fine. When referencing
in Chrome or Firefox it fails with error:

Uncaught ReferenceError: $ is not defined.


enter image description here

With my source code:

<!DOCTYPE html>
<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");

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


Note: The browsers are being directed to a file on the local filesystem:

enter image description here

Update: Tried changing it to

Update: Chrome finds the jquery file (i.e. no 404):

enter image description here


And this question is here just to document the bug in Chrome and 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

Presumably Chrome (and Firefox) assume that a separate script file has the same encoding as the html file.

Chrome then tries to read jquery-1.7.2.js as UTF-16, and is shocked to discover that the file is pure (Windows-1252) garbage.