Dollar sign ("$") is not a function

Question

I'm unsure of why I'm getting this error, but for some reason jQuery's $ is not being recognised?

jQuery(window).load(function ($) {
    'use strict';

    /* Preloader */
    $(".status").fadeOut();
    $(".preloader").delay(1000).fadeOut("slow");

}); /* END WIDNOW LOAD */

NOTE: changing $ to jQuery fixes the issue (so I'm sure jQuery is referenced correctly, am using version 2.1.4), but I would like to continue using $ for semantics.

Rename your parameter, problem solved. Happy life carries on. — TaoPR, Jun 13 '15 at 10:02
`$` is the event. You could pass it to ready method but not load method. This would be for example to handle `$` in wordpress `jQuery(document).ready(function($){...});` — A. Wolff, Jun 13 '15 at 10:20
This is a duplicate from https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function I believe — xarlymg89, Jul 24 '19 at 11:03
Possible duplicate of [TypeError: $ is not a function when calling jQuery function](https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function) — xarlymg89, Jul 24 '19 at 11:04

score 9 · Accepted Answer · edited May 23 '17 at 11:58

You are overriding the $ variable inside your function, because you have an argument with the same name.

Remove the $ argument and $ will again refer to the global scoped one, equal to jQuery.

jQuery(window).load(function () {
    'use strict';

    /* Preloader */
    $(".status").fadeOut();
    $(".preloader").delay(1000).fadeOut("slow");

}); /* END WIDNOW LOAD */

You can use a parameter for the handler function passed into load. I suggest the same as Anik Islam Abhi's answer: use another name for the argument. For example e or eventArgs.

Note that you (or others landing here) might actually be trying to use a pattern that makes sure jQuery is available as $ inside certain scope (e.g. because there may be a conflict with another library also declaring $ in global scope). If that's the case, I suggest something along these lines:

(function($) {
    $(window).load(function () {
        'use strict';

        /* Preloader */
        $(".status").fadeOut();
        $(".preloader").delay(1000).fadeOut("slow");

    }); /* END WIDNOW LOAD */
}(jQuery));

This will wrap all your code inside a function which is executed immediately with jQuery passed in as an argument. Because $ is the name of the argument of that function, you'll know for sure that $ is equal to the global jQuery within that function's scope.

@A.Wolff Good point. Could be OP or others are looking for a pattern to *make sure* that `$` refers to `jQuery`, I've added a footnote / second part with some code to handle that case. — Jeroen, Jun 13 '15 at 10:29
Kudos for pointing out the IIFE wrapper, which binds `jQuery` to `$` as the function begins to execute. — vhs, Jun 01 '17 at 05:36

score 2 · Answer 2 · edited Jun 13 '15 at 09:59

2

You are overriding event parameter with $

Try like this

jQuery(window).load(function (e) {
    'use strict';

    /* Preloader */
    $(".status").fadeOut();
    $(".preloader").delay(1000).fadeOut("slow");

}); /* END WIDNOW LOAD */

edited Jun 13 '15 at 09:59

bugwheels94

28,872
3
36
59

answered Jun 13 '15 at 09:59

Anik Islam Abhi

24,762
8
55
78

`$` could refers to something else than jQuery – A. Wolff Jun 13 '15 at 10:22

score 2 · Answer 3 · answered Jun 13 '15 at 10:19

2

Maybe you wanted something like that?

jQuery(document).ready(function ($) {
    'use strict';

    /* Preloader */
    $(".status").fadeOut();
    $(".preloader").delay(1000).fadeOut("slow");

}); /* END WIDNOW LOAD */

answered Jun 13 '15 at 10:19

Serg

733
1
9
19

Ya, i think it is what OP is looking for, handling $ to refers to jQuery inside ready handler – A. Wolff Jun 13 '15 at 10:21

Dollar sign ("$") is not a function

3 Answers3