CODEWITHSUNDEEP
javascriptjquery
lee03
lee03

Reputation: 13

Can not resolve Uncaught ReferenceError: jQuery is not defined

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.

Upvotes: 0

Views: 1341

Answers (1)

Sceptic
Sceptic

Reputation: 1659

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.

Upvotes: 1

Related Questions