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

by . Originally posted

“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:

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

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

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

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:

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

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

Categories: Computing, Fixes & Solutions, jQuery

Tags:

19 Comments

Leave a Reply

Your email address will not be published.

Links and useful footery things…

Copyright © 2017 Paul Joyce. Follow me on Twitter or perhaps Google+