jQuery: $ is not a function

December 30th, 2008
11 comments JQuery, WordPress posted by Pete

Recently I ran into an issue  while trying to use jQuery on a custom WordPress based Content Management System.  This particular system had a number of instances in which the framework was being referenced.  Normally you insert jQuery code using the dollar sign ($) like so:

$(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

The problem arises when a different system grabs the $ variable.  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 a pretty easy way of fixing this in the form of jQuery.noConflict.  Running this function gives control of the $ variable back to whichever library first implemented it.  This will help to ensure that jQuery won’t conflict with other instances of the $ object in other libraries.

But please note, in doing this, you are re-assigning the variable so you will only be able to access jQuery commands using the ‘jQuery’ variable (which has just replaced ‘$’).  So our above code example would look something 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 that’s easy to do in WordPress when multiple plugins begin conflicting with each other.   Follow the link for the  full jQuery documentation on jQuery.noConflict

  1. ravi said on 10/11/09

    Thanks Man! very useful article.

  2. envio said on 11/03/09

    Thank’s , I am newbie on jQuery ^^

  3. Pete said on 11/03/09

    No problem, just glad it helped :-) And Envio, we all gotta start somewhere, eh?

  4. Vincy said on 12/02/09

    Very useful article. Thank you!

  5. Mike said on 12/19/09

    Dude, you just saved me. I couldn’t figure out what was wrong with my code.

  6. Mads said on 02/04/10

    var $ = jQuery.noConflict();
    $(function){…

    Also works :)

  7. css said on 02/20/10

    Nice positing

  8. Esteban said on 04/06/10

    Hi!

    I stumbled upon this article: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/ and I was wondering what’s wrong with this solution:

    function($) {
       // we can now rely on $ within the safety of our “bodyguard” function
       $(document).ready( function() {
           alert(”nyah nyah! I’m able to use ‘$’!!!!”);
       } );
    } ) ( jQuery );
    
  9. Pete said on 04/06/10

    Hi Esteban.

    Is that function not working for you? If its working for your particular space, there should be nothing whatsoever wrong with using it.

    As Mads demonstrated above, one of the great things about programming / problem solving is that there is generally many ways to accomplish a problem.

  10. Nicolo Verrini said on 04/16/10

    Thank you Man

  11. Pete said on 04/16/10

    No problem Nicolo ;-) Just glad it helped.

Leave a Reply