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:

Source Code:

1 2 3 4 5

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

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

Source Code:

1 2 3 4 5

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.

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

Source Code:

1 2 3 4 5

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

Tweet