javascript - jQuery "$ is not a function" error - Stack Overflow

admin管理员组

文章数量:1419248

I swear I have included jquery in the page header, it is right there!

Nonetheless the following code, which I've included near the bottom of the page (and inline for now) gives me an error saying "TypeError: $ is not a function."

<script>
        function displayResult(longA, latA, longB, latB, units) {
            $("#distance").html(calcDist(longA, latA, longB, latB, units));
            if (units=="m") {
                $("#unitLabel").html("miles");
                $("units").prop("selectedIndex",0);
            } else {
                $("#unitLabel").html("kilometers");
                $("#units").prop("selectedIndex",1);
            }
            $("#longA").val(longA);
            $("#latA").val(latA);
            $("#longB").val(longB);
            $("#latB").val(latB);
        }

        $("#calculateButton").click(function() { //This is the line it's plaining about
            var longA=$("#longA").val();
            var latA=$("#latA").val();
            var longB=$("#longB").val();
            var latB=$("#latB").val();
            var units=$("#units").val();
            displayResult(longA, latA, longB, latB, units);
        })(jQuery);
    </script>

Higher up in the page header I've got the following:

<script src="jquery.js" ></script>
<script src="calcDistSinglePage.js" ></script>

I'm not using Wordpress or anything, this is a very straightforward hand-coded HTML page.

I swear I have included jquery in the page header, it is right there!

Nonetheless the following code, which I've included near the bottom of the page (and inline for now) gives me an error saying "TypeError: $ is not a function."

<script>
        function displayResult(longA, latA, longB, latB, units) {
            $("#distance").html(calcDist(longA, latA, longB, latB, units));
            if (units=="m") {
                $("#unitLabel").html("miles");
                $("units").prop("selectedIndex",0);
            } else {
                $("#unitLabel").html("kilometers");
                $("#units").prop("selectedIndex",1);
            }
            $("#longA").val(longA);
            $("#latA").val(latA);
            $("#longB").val(longB);
            $("#latB").val(latB);
        }

        $("#calculateButton").click(function() { //This is the line it's plaining about
            var longA=$("#longA").val();
            var latA=$("#latA").val();
            var longB=$("#longB").val();
            var latB=$("#latB").val();
            var units=$("#units").val();
            displayResult(longA, latA, longB, latB, units);
        })(jQuery);
    </script>

Higher up in the page header I've got the following:

<script src="jquery.js" ></script>
<script src="calcDistSinglePage.js" ></script>

I'm not using Wordpress or anything, this is a very straightforward hand-coded HTML page.

• javascript
• jquery

Share Improve this question Follow asked Apr 14, 2015 at 21:31 Eamonn GormleyEamonn Gormley 2,44644 gold badges2222 silver badges2121 bronze badges 6

• 2 Are you sure that "jquery.js" is the right path to your jQuery file? I would try opening up developers tools and checking out the navigation tab to see if jquery file is actually getting hit. – KJ Price Commented Apr 14, 2015 at 21:33
• 6 Also the (jQuery) part is weird. .click doesn't return a function, it returns a jQuery object. You cannot call a jQuery object. – Felix Kling Commented Apr 14, 2015 at 21:33
• Make sure the path is correct. If it's in a different folder than the page you're linking it to, this path would be incorrect. – Tim Lewis Commented Apr 14, 2015 at 21:33
• })(jQuery); .. where are you getting this one to be onclick? – A.B Commented Apr 14, 2015 at 21:34
• Try inspect element, and open the jquery link in new tab, see if it point to the correct path. – Faiz Commented Apr 14, 2015 at 21:37

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

Try wrapping your code in a closure (which is considered good practice anyways):

(function($) {
    $("#calculateButton").click(function() {
      // do stuff...
    });
}(jQuery));

If this snippet still plains with the same error, there's bound to be a problem with the way you're loading the jQuery library.

Also, make sure that you don't overwrite the $ variable in your other code. For example, inside calcDistSinglePage.js.

The dollar-sign is a very straight-forward javascript variable and can be reassigned to whatever you want. According to the error, $ currently is something but not a function (otherwise you'd receive a ReferenceError stating that $ is undefined). So probably, somewhere in your code, you've overwritten it.

Make sure the jQuery library it's the first script you load.

Add this just before the closing </body> tag.

<script src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>

• Download the file locally and inside js/vendor/ add the file.
• Replace the value {{JQUERY_VERSION}} in the script above adding your jquery version.

Here one CDN you could use.

https://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js

https://code.jquery./jquery-2.1.3.min.js

本文标签： javascriptjQuery quot is not a functionquot errorStack Overflow