jQuery $ is not a function

jQuery: $ is not a function – Fix for common jQuery error

“Error: $ is not a function”, this is the error that was being thrown back at me while working on a WordPress site the other day. However for the life of me I couldn’t see why my, usual fine JavaScript code, was failing. Was it a problem with my jQuery code, my WordPress installation or both?

I reduced my code down to producing an alert when the DOM was ready, but still it threw the error:

Error: $ is not a function

Well I’m sure we’ve all had this error before, usually when we break or incorrectly reference the jQuery core library. However I doubled checked and it was definitely pointing to the right file.

After a little spree on Google and a bit of research, I found that WordPress loads jQuery in a ‘no-conflicts’ mode to significantly reduce the likelihood of it conflicting with other third party libraries that a owner may install on their blog/site.

What this means in my scenrario, was exactly what the error stated. In ‘no conflict’ mode the $ shortcut is disabled, so you must replace it with the word ‘jQuery’ (notice the capitalised Q).

So if you had a piece of script such as:

[js]$(document).ready(function() {
$(".someClass").hide();
$("#elementID .anotherClass").eq(2).show();

}[/js]

You’d replace all the dollar symbols with the string ‘jQuery’.

[js]jQuery(document).ready(function() {
jQuery(".someClass").hide();
jQuery("#elementID .anotherClass").eq(2).show();

}[/js]

So thats one way to circumnavigate the conflict free wrapper that WordPress applies to jQuery.

Another approach, jQuery and conflict modes…

In my situation I was importing some large chunks of jQuery code libraries, so I didn’t really want to duplicate my existing libraries just for the purposes of having one in ‘normal’ mode and one in ‘no-conflicts’ mode.

Then I read you can easily override the ‘no-conflict’ compatibility mode, score! Now normally you shouldn’t just jump in and override such a system, it is there for a reason you know! The WordPress system is built by some very brainy people, much better than myself, so if they think its a requirement for a vanilla install of their system then so be it. However with the project I was working on, I knew exactly what was installed already, and that no further plugins will be scheduled to be installed for a long time. Either way I dropped a few comments in the top of the jQuery source file, as well as a ReadMe file in the jQuery directory, just in case in the future it did become a problem.

Anyway… the solution turned out to be simple passing the dollar shortcut in as a argument for the ready function applied to the document. So our example code becomes:

[js]jQuery(document).ready(function( $ ) {
$(".someClass").hide();
$("#elementID .anotherClass").eq(2).show();

}[/js]

Notice we still have to use the conflict free wrapper to begin with, but once the page is ready the dollar shortcut will work for your existing code. So no need to go changing those libraries!

Hope that helps someone out, I was nearly tearing my hair out trying to work out why the error “$ is not a function” was being thrown

27 thoughts on “jQuery: $ is not a function – Fix for common jQuery error

  1. I have been searching for this solution for hours – thank you SO much! I also have a WordPress blog and not being terribly good at coding, I ended up just using your first example, but this was absolutely perfect.

  2. After 2 days of scouring the Internet with google. You nailed it – My site is not WordPress but I had the same problem: ‘no conflict’ option was set. I was trying jquery for a day but it was the capital ‘Q’ in jQuery that you specifically mentioned. Thank you!!

  3. Great post. Thanks! After reading I did this with wrapping the whole thing in:
    (function ($) { ……..
    CODE
    ……})(jQuery);

    wordpress 4.9 Jquery 1.4.1 loaded….

  4. Pingback: Lee
  5. Great article and very helpful!

    I was stuck with this for some time. Initially I thought for some reason the jQuery libs were not included, although the page source showed those ware there. Which confused me even more, haha. Thanks again!

  6. Hey thanks, that really helped me out. I guess the issue came with an WordPress update what I think is really a no-go because of-course plugins were tested before being used.

  7. Paul, you are simply the guru!

    Wish i’d found this article sooner – I wasted a day changing my jQuery code – needlessly as I now realise!

  8. Thanks. It was great help. Was stuck and I thought it had to with cache or maybe a script link issue. But your solution was perfect. Great timing too!.

  9. Worse than having this error is when you use $ and it returns something but not what you expect. Turns out it’s been redefined by another 3rd party plugin.

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

  10. As a WordPress veteran, I know write “jQuery”, longhand, ALL the time. I’ve almost forgotten that the $ shortcut exists.

    I think its worth pointing out WHY WordPress loads it in noconflict mode. This is something you allude to without ever actually explaining: there are other JavaScript libraries/frameworks that use $ as their shorthand (such as Prototype and MooTools), so if you were to load jQuery and Prototype you’d have confusion about which was using the $.

    Why would you load jQuery and Prototype? Well, any sensible developer picks a framework and sticks with it! But consider that you might install two WordPress plugins written by different developers, one that uses jQuery and one that uses Prototype. Then you’d have your conflict appear!

  11. two days on a damn jquery error and this simple step solved it in a minute. thanks buddy.
    I just replaced all “$(” with “jQuery(“

  12. Holy crap! I have looked for this solution for over a year! So elegant, so simple. And best of all it worked perfectly. The “$ is not a function” will no longer curse me.

Leave a Reply

Your email address will not be published.