TypeError: 'undefined' is not a function (evaluating '$(document)')

Question

I'm using a WordPress site.
I'm including this script in the header.

When the script loads, I get this error:

TypeError: 'undefined' is not a function (evaluating '$(document)')

I have no idea what is causing it or what it even means.

In firebug, I get this:

$ is not a function

Make sure you're including the jQuery libary **before** your custom script, and that there are no errors in the `Net` tab of Firebug (make sure jQuery actually gets loaded). — wsanville, Nov 02 '11 at 02:14
... yes, of course jQuery is loading in before hand. I'm pretty sure it's a WordPress enque issue. — dcolumbus, Nov 02 '11 at 02:37

El Yobo · Accepted Answer · 2013-05-29T00:20:31.703

241

Wordpress uses jQuery in noConflict mode by default. You need to reference it using jQuery as the variable name, not $, e.g. use

jQuery(document);

instead of

$(document);

You can easily wrap this up in a self executing function so that $ refers to jQuery again (and avoids polluting the global namespace as well), e.g.

(function ($) {
   $(document);
}(jQuery));

edited May 29 '13 at 00:20

answered Nov 02 '11 at 02:33

El Yobo

14,823
5
60
78

5

The script is not necessary; you can just call `jQuery(document)` instead of `$(document)` wherever you want. If you do want to use `$` instead, then the above script simply creates a function which takes an argument `$` then executes it passing `jQuery`; in short, within the function, `$` points to jQuery as you would expect. – El Yobo Nov 02 '11 at 03:08
2

Actually, what I did was place my normal `$(document).ready(function() { // code });` in place of your `$(document);` ... that worked like a charm. – dcolumbus Nov 02 '11 at 04:09
1

Yes, that is what I was suggesting - "within the function, $ points to jQuery as you would expect". – El Yobo Nov 02 '11 at 04:48
Well, it does save you a couple of characters that way :) More details about [the !function(){}() form of self executing statement](http://stackoverflow.com/questions/5422585/preceding-function-in-javascript). – El Yobo Feb 07 '13 at 20:24
I know it's old @ElYobo, but I think you could edit your post and add your example from your first comment into the response as a second example. Thank you for saving me time =) – Manatax May 29 '13 at 00:18
undefined is not a function can also be caused by including jQuery more than once – Michael L Watson Jun 13 '14 at 06:00
For those using Jenzabar, this is the solution you're looking for as well. – Riot Goes Woof Aug 12 '14 at 14:52

score 28 · Answer 2 · edited Aug 12 '15 at 20:59

Use jQuery's noConflict. It did wonders for me

var example=jQuery.noConflict();
example(function(){
example('div#rift_connect').click(function(){
    example('span#resultado').text("Hello, dude!");
    });
});

That is, assuming you included jQuery on your HTML

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

score 16 · Answer 3 · edited Jun 09 '14 at 11:34

16

Use this:

var $ =jQuery.noConflict();

edited Jun 09 '14 at 11:34

slavoo

5,798
64
37
39

answered Jun 09 '14 at 11:14

Suman Biswas

853
10
19

score 11 · Answer 4 · edited Aug 04 '14 at 22:46

11

Try this snippet:

jQuery(function($) {
  // Your code.
})

It worked for me, maybe it will help you too.

edited Aug 04 '14 at 22:46

hugronaphor

948
8
23

answered May 02 '14 at 07:32

Gurpreet Dhanoa

131
1
2

score 11 · Answer 5 · edited Dec 11 '14 at 11:15

11

I had this problem only on Chrome.

I tried adding

var $ =jQuery.noConflict();

just before calling

$(document).ready(function () {

It worked.

Thanks a lot

edited Dec 11 '14 at 11:15

Stewartside

20,378
12
60
81

answered Dec 11 '14 at 10:48

Le_Dhul

121
1
2

Thanks for this one. I knew I could resolve the issue using "jQuery" instead of "$" but my problem was that it trips up Komodo edit when written that way so I had to choose between getting code hinting/completion on $ or having my JavaScript actually work. This method let me have both. – George Kendros Jun 15 '15 at 20:36

score 6 · Answer 6 · answered May 15 '14 at 00:34

6

Also check for including jQuery, followed by some components/other libraries (like jQuery UI) and then accidentially including jQuery again - this will redefine jQuery and drop the component helpers (like .datepicker) off the instance.

answered May 15 '14 at 00:34

agrath

901
1
11
25

score 5 · Answer 7 · edited Jan 19 '17 at 15:35

5

I would use this

(function ($) {
   $(document);
}(jQuery));

edited Jan 19 '17 at 15:35

Mihriban Minaz

3,043
2
32
52

answered Oct 18 '16 at 20:22

JoT

301
1
3
10

score 4 · Answer 8 · answered Nov 19 '15 at 10:41

4

 ;(function($){
        // your code
    })(jQuery);

Place your js code inside the closure above , it should solve the problem.

answered Nov 19 '15 at 10:41

Bikram Shrestha

2,010
24
22

score 2 · Answer 9 · answered Jun 18 '16 at 16:36

I have also faced such problems many time in web develoment carrier. Actually its not JS conflict, When we load html website to the browser we face no such error, but when we load these type of website through localhost we face such problem. That's because of localhost. When we load scripts through the localhost it scans the script and renders the output. But when we didn't use localhost. It just scan the output. Example, when we write php code putside the localhost and run without host we get error. But if the code is correct and is run through host we get actual output, and when we use inspect element we get the output code in HTMl format but not in PHP format this is because of rendering of the code.

This is rendering error. So to fix these jquery code error one of the solution may be using this method.

jQuery(document).ready(function($){
/******** Body of Jquery Code*****/
});

What this code does is register '$' as the varible to the function by applying jquery. Else by default the .js file is only read as javascript.

score 1 · Answer 10 · answered Oct 05 '13 at 12:27

1

I ran into this problem also when including jQuery in my page header, not realizing the host was already including it in the page automatically. So load your page live and check the source to see if jQuery is being linked in.

answered Oct 05 '13 at 12:27

FrostyL

811
6
9

Jorge Alejandro Inturias · Answer 11 · 2014-07-10T22:41:44.663

1

Two things:

Be sure that you have jQuery library added, before your $(document).
Then just change all "$" with: jQuery , as the previous comments.

edited Jul 10 '14 at 22:41

answered Jul 04 '14 at 02:15

Jorge Alejandro Inturias

11
4

score 1 · Answer 12 · answered Jul 15 '15 at 04:49

wrap all the script between this...

<script>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
      // Code that uses jQuery's $ can follow here.
    });
</script>

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

score 1 · Answer 13 · answered Jul 20 '15 at 11:21

1

You can use both jQuery and $ in below snippet. it worked for me

jQuery( document ).ready(function( $ ) {
  // jQuery(document)
  // $(document)
});

answered Jul 20 '15 at 11:21

Kalpesh Prajapati

1,703
1
12
15

score 1 · Answer 14 · answered Jun 07 '17 at 12:51

You can pass $ in function()

jQuery(document).ready(function($){

// jQuery code is in here

});

or you can replace $(document); with this jQuery(document);

or you can use jQuery.noConflict()

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  jq('selector').show();
});

TypeError: 'undefined' is not a function (evaluating '$(document)')

14 Answers14

Linked

Related