$ is not a function - jQuery error

Question

I have the jQuery loaded fine, I've quadruple-checked, though I'm getting this error in FireBug "$ is not a function" and my code doesn't work.

Here's my code:

<script type="text/javascript">
    $("ol li:nth-child(1)").addClass('olli1');
    $("ol li:nth-child(2)").addClass("olli2");
    $("ol li:nth-child(3)").addClass("olli3");
    $("ol li:nth-child(4)").addClass("olli4");
    $("ol li:nth-child(5)").addClass("olli5");
    $("ol li:nth-child(6)").addClass("olli6");
    $("ol li:nth-child(7)").addClass("olli7");
    $("ol li:nth-child(8)").addClass("olli8");
    $("ol li:nth-child(9)").addClass("olli9");
    $("ol li:nth-child(10)").addClass("olli10");
    $("ol li:nth-child(11)").addClass("olli11");
    $("ol li:nth-child(12)").addClass("olli12");
    $("ol li:nth-child(13)").addClass("olli13");
    $("ol li:nth-child(14)").addClass("olli14");
    $("ol li:nth-child(15)").addClass("olli15");
    $("ol li:nth-child(16)").addClass("olli16");
    $("ol li:nth-child(17)").addClass("olli17");
    $("ol li:nth-child(18)").addClass("olli18");
    $("ol li:nth-child(19)").addClass("olli19");
    $("ol li:nth-child(20)").addClass("olli20"); 
</script>

where is that code, in relation to when you load the jQuery scripts? — RPM1984, Oct 14 '10 at 08:52
Can you confirm in firebug that jquery gets loaded? Can you show your `head`? — Pekka, Oct 14 '10 at 08:52
jQuery is loaded in the header and this script in the footer, so this is not the issue — Alex, Oct 14 '10 at 08:55
OffTopic: Wow! your going to have 20 different classes for a simple list? shouldn't you approach this in other way? — balexandre, Oct 14 '10 at 08:58
Haven't called [noConflict](http://api.jquery.com/jQuery.noConflict/) anywhere, have you? — Matt Gibson, Oct 14 '10 at 08:58
Please post the smallest possible example in jsbin/jsfiddle where the error occurs, so we get even a little chance to help you. Just that short portion of code plus "... so this is not the issue" is the same as asking my crystal ball what the problem is... — Andreas, Oct 14 '10 at 09:00
demo page http://www.softsailor.com/how-to/46957-how-to-use-greenpois0n-to-jailbreak-iphone-4-3gs-ipad-ipod-touch-ios-4-14-0.html — Alex, Oct 14 '10 at 09:02
I've also tried the $(document).ready(); and it doesn't work — Alex, Oct 14 '10 at 09:02

score 187 · Accepted Answer · answered Oct 14 '10 at 09:09

187

In Wordpress jQuery.noConflict() is called on the jQuery file it includes (scroll to the bottom of the file it's including for jQuery to see this), which means $ doesn't work, but jQuery does, so your code should look like this:

<script type="text/javascript">
  jQuery(function($) {
    for(var i=0; i <= 20; i++) 
      $("ol li:nth-child(" + i + ")").addClass('olli' + i);
  });
</script>

answered Oct 14 '10 at 09:09

Nick Craver

623,446
136
1,297
1,155

1

I've replaced my code with this one, but it still doesn't work. This is the page http://www.softsailor.com/how-to/46957-how-to-use-greenpois0n-to-jailbreak-iphone-4-3gs-ipad-ipod-touch-ios-4-14-0.html – Alex Oct 14 '10 at 09:13
1

@Alex - Taking a look, noConflict is definitely your issue with `$`...see it in your jQuery include at the end: http://www.softsailor.com/wp-includes/js/jquery/jquery.js?ver=1.4.2, seeing what else is wrong now. – Nick Craver Oct 14 '10 at 09:18
1

@Alex - You don't have the code in the answer, your code has `var i=i` for some reason, it should be `var i=0`, replace that and it'll work. – Nick Craver Oct 14 '10 at 09:21
Wow, I would've never thought of that. – The Onin Aug 29 '15 at 04:38
1

by making $ a function i was able to fix my code `var $ = jQuery;` – sairfan Dec 19 '18 at 16:28
@sairfan then you'll get conflicts instead – OrangeDog Apr 20 '21 at 12:46

score 49 · Answer 2 · answered Oct 14 '10 at 09:09

It's really hard to tell, but one of the 9001 ads on the page may be clobbering the $ object.

jQuery provides the global jQuery object (which is present on your page). You can do the following to "get" $ back:

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

If you think you're having jQuery problems, please use the debug (non-production) versions of the library.

Also, it's probably not best to be editing a live site like that ...

Great! Thank you very much! :) – joryl Sep 19 '16 at 20:38 — joryl, Sep 19 '16 at 20:38

score 6 · Answer 3 · answered Jul 18 '17 at 06:08

<script type="text/javascript">
    $("ol li:nth-child(1)").addClass('olli1');
    $("ol li:nth-child(2)").addClass("olli2");
    $("ol li:nth-child(3)").addClass("olli3");
    $("ol li:nth-child(4)").addClass("olli4");
    $("ol li:nth-child(5)").addClass("olli5");
    $("ol li:nth-child(6)").addClass("olli6");
    $("ol li:nth-child(7)").addClass("olli7");
    $("ol li:nth-child(8)").addClass("olli8");
    $("ol li:nth-child(9)").addClass("olli9");
    $("ol li:nth-child(10)").addClass("olli10");
    $("ol li:nth-child(11)").addClass("olli11");
    $("ol li:nth-child(12)").addClass("olli12");
    $("ol li:nth-child(13)").addClass("olli13");
    $("ol li:nth-child(14)").addClass("olli14");
    $("ol li:nth-child(15)").addClass("olli15");
    $("ol li:nth-child(16)").addClass("olli16");
    $("ol li:nth-child(17)").addClass("olli17");
    $("ol li:nth-child(18)").addClass("olli18");
    $("ol li:nth-child(19)").addClass("olli19");
    $("ol li:nth-child(20)").addClass("olli20"); 
</script>

change this to

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
        $("ol li:nth-child(1)").addClass('olli1');
        $("ol li:nth-child(2)").addClass("olli2");
        $("ol li:nth-child(3)").addClass("olli3");
        $("ol li:nth-child(4)").addClass("olli4");
        $("ol li:nth-child(5)").addClass("olli5");
        $("ol li:nth-child(6)").addClass("olli6");
        $("ol li:nth-child(7)").addClass("olli7");
        $("ol li:nth-child(8)").addClass("olli8");
        $("ol li:nth-child(9)").addClass("olli9");
        $("ol li:nth-child(10)").addClass("olli10");
        $("ol li:nth-child(11)").addClass("olli11");
        $("ol li:nth-child(12)").addClass("olli12");
        $("ol li:nth-child(13)").addClass("olli13");
        $("ol li:nth-child(14)").addClass("olli14");
        $("ol li:nth-child(15)").addClass("olli15");
        $("ol li:nth-child(16)").addClass("olli16");
        $("ol li:nth-child(17)").addClass("olli17");
        $("ol li:nth-child(18)").addClass("olli18");
        $("ol li:nth-child(19)").addClass("olli19");
        $("ol li:nth-child(20)").addClass("olli20"); 
     });
    </script>

score 6 · Answer 4 · answered Mar 13 '18 at 16:00

6

In my case I was using jquery on my typescript file:

import * as $ from "jquery";

But this line gives me back an Object $ and it does not allow to use as a function (I can not use $('my-selector')). It solves my problem this lines, I hope it could help anyone else:

import * as JQuery from "jquery";
const $ = JQuery.default;

answered Mar 13 '18 at 16:00

Luillyfe

6,183
8
36
46

1

I needed to do this in typescript, const $ = (JQuery as any).default; but your solution worked thanks – patrick Nov 21 '18 at 21:49

score 6 · Answer 5 · answered Feb 14 '19 at 13:42

There are quite lots of answer based on situation.

1) Try to replace '$' with "jQuery"

2) Check that code you are executed are always below the main jquery script.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

});
</script>

3) Pass $ into the function and add "jQuery" as a main function like below.

<script type="text/javascript">
jQuery(document).ready(function($){

});
</script>

score 4 · Answer 6 · answered Oct 14 '10 at 08:53

4

As RPM1984 refers to, this is mostly likely caused by the fact that your script is loading before jQuery is loaded.

answered Oct 14 '10 at 08:53

mkoistinen

7,724
3
41
56

1

jQuery is loaded in the header and this script in the footer, so this is not the issue. – Alex Oct 14 '10 at 08:54

score 1 · Answer 7 · answered Oct 14 '10 at 08:58

That error kicks in when you have forgot to include the jQuery library in your page or there is conflict between libraries - for example you be using any other javascript library on your page.

Take a look at this for more info:

Using jQuery with other libraries

Mic · Answer 8 · 2010-10-14T09:12:20.810

1

When jQuery is not present you get $ is undefined and not your message.

Did you check if you don't have a variable called $ somewhere before your code?
Inspect the value of $ in firebug to see what it is.

Slightly out of the question, but I can't resist to write a shorter code to your class assignment:

    var i = 1;
    $("ol li").each(function(){
        $(this).addClass('olli' + i++);
    });

edited Oct 14 '10 at 09:12

answered Oct 14 '10 at 09:04

Mic

24,812
9
57
70

score -2 · Answer 9 · answered Jul 31 '18 at 05:09

-2

Use jQuery for $. I tried and work.

answered Jul 31 '18 at 05:09

Diego Santa Cruz Mendezú

4,325
39
27

score -2 · Answer 10 · answered Jun 18 '21 at 00:26

-2

I believe using $ alone is now deprecated in the new version of jQuery. Use below syntax instead:

jQuery(function($) {
//magic here
})

answered Jun 18 '21 at 00:26

Rosalito Udtohan

187
1
11

score -4 · Answer 11 · answered Oct 14 '10 at 08:58

-4

There are two possible reasons for that error:

your jquery script file referencing is not valid
try to put your jquery code in document.ready, like this:

$(document).ready(function(){

....your code....

});

cheers

answered Oct 14 '10 at 08:58

Marko

1,874
1
21
36

1

The jQuery is included automatically by Wordpress. I tried that and it still doesn't work. – Alex Oct 14 '10 at 09:05
2

I don't think the use of, or non-use of the document ready construct would make any difference at all here. Also, if '$' isn't yet defined, how can you call $(document.ready(...) ? Sorry, -1. – mkoistinen Oct 14 '10 at 11:48

$ is not a function - jQuery error

11 Answers11

Linked

Related