All geek questions in one place

Chrome: not specified ReferenceError: $ not defined

I am using jQuery on a webpage. When using $ in Internet Explorer, it works great. When you reference $ in Chrome or Firefox, it does not work with an error:

 Uncaught ReferenceError: $ is not defined.

Screenshot:

enter image description here

With my source code:

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

Note. Browsers are redirected to the local file system file:

enter image description here

Update . Try changing it to jQuery .

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

enter image description here

+6
source share
7 answers

And this question is here only for documenting the error 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.

Then Chrome tries to read jquery-1.7.2.js as UTF-16 and is shocked that the file is clean (Windows-1252) junk.

+7
source

Check the jquery-1.7.2.min.js path is correct. You can check firebug using the Firefox or Chrome development tool to see if the file is downloading. You most likely get 404 for the jQuery file, because of which $ is undefined on the page, which is an alias for the jQuery object.

+5
source

You can get this error using Javascript in Firefox and Chrome:

 Uncaught ReferenceError: $ is not defined.

If you enabled jquery as follows:

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

And your server is configured to not allow javascript to load and run at runtime, and then you get the above error. Take a look at the whole error:

 [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

What this means is that your web server does not allow loading javascript content on the fly. This is a security risk because someone can inject evil things into it so that you can download them and own the servers.

+2
source

None of the above was applicable to me in Chrome 49. I had to specify the type as "application / javascript" as follows:

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

Using "text / javascript" does not work.

+1
source

Try:

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

Your function should be wrapped in a finished house:

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

This will allow the function to work only after the page loads. also your scripts should be loaded immediately before the closing HTML tag. not everything is on top. which will allow the page to load HTML and CSS faster because they don’t have to wait for JS to load.

Also make sure you have the correct jQuery path from your HTML.

Last thing

Instead, if your click listener in embedded HTML tries to move it to JS. This is just a simpler and clearer way to handle this.

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

Instead of onclick in html, I assigned everything via id in jQuery code.

I'm not sure if you want to know if the div is checked or if the checkbox is checked. I put the input check into the code and commented out the code if clicked on.

 <!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>
0
source

Source: https://habr.com/ru/post/916121/

More articles:


All Articles