Uncaught ReferenceError: $ is not defined because aysnc in script need to Remove render-blocking JavaScript:

Question

I searched my site on this https://developers.google.com/speed/pagespeed/insights/ it showed I have Render blocking javascript (jquery).. so I put async

<script src="js/jquery-3.1.1.min.js" async></script>

after that I got the following error..

Uncaught ReferenceError: $ is not defined

for the following jquery dependent code

$(function(){
    $('.SOMECLASS').on('click', function(){
       //some action
    })
})

So I changed to the following

document.addEventListener("DOMContentLoaded", function(event) { 
    $('.SOMECLASS').on('click', function(){
       //some action
    })
})

But still it is throwing the same error. also tried

window.onload = function(event) { 
    $('.SOMECLASS').on('click', function(){
       //some action
    })
}

but it if add window.onload click functions doesn't work..

How to make the code run after jquery is loaded?

Please help me..

Is your javascript in the page itself, or also in an external script file? — James Thorpe, Mar 08 '17 at 12:22
Have you got the script tags for jQuery before the script that you're trying to run? — Geoff, Mar 08 '17 at 12:22
@James Thorpe yes it is in the same page, I have external script also — scriptkiddie1, Mar 08 '17 at 12:24
@ Avihay m bro defer is for external script.. here jquery is not doing anything.. dependent scripts are running before jquery being downloaded.. — scriptkiddie1, Mar 08 '17 at 12:26
may be you can try by putting jquery script after the body and without async — Suhail Akhtar, Mar 08 '17 at 12:48

score 0 · Answer 1 · answered Mar 08 '17 at 12:27

0

This error is caused by "async" because jquery doesn't async support if you want async load then use jQI(http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader) or requirejs javascript library.

answered Mar 08 '17 at 12:27

muratoner

2,316
3
20
32

Thank you bro my problem is I want to reduce render blocking scripts.. If I add your script I am afraid that it will also become another render blocking script. – scriptkiddie1 Mar 08 '17 at 12:32
I'm understand you but only use jQI or requirejs then other all javascript library on it load. – muratoner Mar 08 '17 at 12:38

score 0 · Answer 2 · answered Mar 08 '17 at 13:04

0

In case anybody in future come with the same problem.. I put all the jquery dependent code in the external script and called and make async and defer that solved it..

answered Mar 08 '17 at 13:04

scriptkiddie1

497
2
6
17

Uncaught ReferenceError: $ is not defined because aysnc in script need to Remove render-blocking JavaScript:

2 Answers2