JQuery logo

jQuery: $ is not a function

Normally you insert jQuery code using the dollar sign ($) like so:

$(document).ready(function() {

$("a").click(function() {

alert("Hello world!");

});

}); 

The problem is caused because another system already grabbed the “$” variable. This means that all of the sudden you have multiple $ variables being used as objects from multiple libraries, resulting in the error console message “$ is not a function”.

Fortunately, there is an easy way of fixing using the  jQuery.noConflict function.  Running this function gives control of the $ variable back to whichever library first implemented it.  This will help to ensure that jQuery will not conflict with other instances of the $ object in other libraries.

Be careful, by doing this, you are re-assigning the variable. This means you will only be able to access jQuery commands using the ‘jQuery’ variable (which has just replaced ‘$’).  The example above will look like this:

jQuery.noConflict();

jQuery(document).ready(function() {

jQuery("a").click(function() {

alert("Hello world!");

});

});

It doesn’t seem to be a very common problem and only occurs when multiple instances of the object crop up. but this happens often in WordPress when multiple plugins begin conflicting with each other.   Follow the link for the  full jQuery documentation on jQuery.noConflict

Panagiotis

Written By

Panagiotis (pronounced Panayotis) is a passionate G(r)eek with experience in digital analytics projects and website implementation. Fan of clear and effective processes, automation of tasks and problem-solving technical hacks. Hands-on experience with projects ranging from small to enterprise-level companies, starting from the communication with the customers and ending with the transformation of business requirements to the final deliverable.