Can not resolve Uncaught ReferenceError: jQuery is not defined

Question

Hi I have a problem I just can not resolve. I have a mobile menu which works fine in the browser but only works on smartphone after refreshing the page

I get

Uncaught ReferenceError: jQuery is not defined

Here is the code, and below that is the order in which the scripts load

    (function($) {
        $.fn.collapsable = function(options) {
            return this.each(function() {
                var obj = $(this);
                var tree = obj.next('.main-menu ul');
                obj.click(function() {
                    if (obj.is(':visible')) {
                        tree.toggle();
                    }
                });
                $(window).resize(function() {
                    if ($(window).width() <= 800) {
                        tree.attr('style', '');
                    };
                });
            });
        };
    })(jQuery);

    $(document).ready(function() {
        $('.slide-trigger').collapsable();
    });

(analytics code loads first top of the page www.google-analytics.com/analytics.js)

rest of the script loads from the footer all inside the body the mobile-menu.js relates to the code above.

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>

<script async src="js/mobile-menu.js" type="text/javascript"></script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>

I have searched so many links on stackoverflow and other websites for an answer. I have tried no conflict i have swapped the order in which the other scripts load but nothing.

Please. Many thanks for looking.

try removing async from script tag

charlietfl
– charlietfl

2015-07-25 15:05:12 +00:00
Commented Jul 25, 2015 at 15:05 — charlietfl
– charlietfl, Commented Jul 25, 2015 at 15:05

Sceptic · Accepted Answer · 2015-07-25 16:36:37Z

1

Remove async from the first two script tags like this:

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

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

jQuery completed downloading and was run after your own script file when your error occurred. When you add async to script tags they get run whenever they complete downloading.

So make the scripts load and run synchronized and it will work just fine.

edited Jul 25, 2015 at 16:36

answered Jul 25, 2015 at 15:10

Sceptic

1,6592 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can not resolve Uncaught ReferenceError: jQuery is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related