By Jason


2012-09-09 23:05:07 8 Comments

I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper like this:

$(document).ready(function(){

    // jQuery code is in here

});

I am calling this script from within the WordPress Dashboard and am loading it AFTER the jQuery framework has loaded.

When I check the page in Firebug I constantly keep receiving the error message:

TypeError: $ is not a function

$(document).ready(function(){

Should I maybe wrap the script in this function:

(function($){

    // jQuery code is in here

})(jQuery);

I have had this error quite a few times and am not sure how to handle it.

Any help would be greatly appreciated.

16 comments

@Bhavesh Balar 2019-03-12 05:36:26

You can use

jQuery(document).read(function(){ ... });

or

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

@MaXee Khan 2018-02-19 08:06:16

replace $ sign with jQuery like this:

jQuery(function(){
//your code here
});

@Renish Khunt 2018-04-02 07:27:54

Also, I find the good solution for use jQuery noConflict mode.

(function($){

  $(document).ready(function(){
      // write code here
  });

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

I found this solution from here. https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

@Sharif Mohammad Eunus 2018-01-30 06:00:15

(function( $ ) {
  "use strict";

  $(function() {

    //Your code here

  });

}(jQuery));

@Sanjay 2017-08-07 07:04:24

Use

jQuery(document).

instead of

$(document).

or

Within the function, $ points to jQuery as you would expect

(function ($) {
   $(document).
}(jQuery));

@Bikram Shrestha 2014-11-08 17:21:37

This solution worked for me

;(function($){
    // your code
})(jQuery);

Move your code inside the closure and use $ instead of jQuery

I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

...after searching too much

@luis 2015-12-12 00:53:33

Fantastic solution. The main reason this works is because that ";" closes any other instance of jquery already active and at the same time it declares another one new locally. When you have just few seconds to implement a layout in production or lots and lots of wordpress plugins running this can do it great. But, be aware that you must fix the issue, this is just a band-aid, but if it is an info page it's OK.

@Bikram Shrestha 2016-04-29 05:52:30

@Martha James This works for me so included it. It may or maynot work for others

@optimiertes 2016-05-30 08:14:37

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

Credit to Ashwani Panwar and Cyssoo answer: https://stackoverflow.com/a/29341144/3010027

@Laxman Jaygonde 2016-05-16 04:55:24

You come across this issue when your function name and one of the id names in the file are same. just make sure all your id names in the file are unique.

@PbxMan 2016-03-21 11:16:20

What worked for me. The first library to import is the query library and right then call the jQuery.noConflict() method.

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>

@Matthew Blancarte 2012-09-09 23:09:49

This should fix it:

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

Put simply, WordPress runs their own scripting before you can and they release the $ var so it won't collide with other libraries. This makes total sense, as WordPress is used for all kinds of web sites, apps, and of course, blogs.

From their documentation:

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available...

@Aman birjpuriya 2015-09-30 05:29:09

<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

now use jq in place of jQuery

@Jitendra Damor 2015-07-08 12:22:42

You have to pass $ in function()

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>

@rnevius 2016-02-03 04:27:48

How is this any different than the answer given above (from three years prior)?

@Raghul Manoharan 2015-05-18 20:12:48

Double check your jQuery references. It is possible that you are either referencing it more than once or you are calling your function too early (before jQuery is defined). You can try as mentioned in my comments and put any jQuery reference at the top of your file (in the head) and see if that helps.

If you use the encapsulation of jQuery it shouldn't help in this case. Please try it because I think it is prettier and more obvious, but if jQuery is not defined you will get the same errors.

In the end... jQuery is not currently defined.

@Dan Moldovan 2015-05-18 20:36:22

I think it's rather than something tries to access JQuery before it's defined which in turn breaks everything. Try moving your script which references JQuery to the top of your index.html and it will probably work

@edkay 2017-01-13 19:57:21

This answer needs more visibility. Yes, the others are valid if the standard namespace is taken with a version of jQuery loaded via some other plugin. But do check you're not inadvertently (and possibly unnecessarily) loading jQuery more than once.

@Ashwani Panwar 2015-03-30 08:02:33

You can avoid confliction like this

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

@Cyssoo 2015-12-29 14:24:49

Or $=jQuery.noConflict();

@Jose Carlos Ramos Carmenates 2014-03-24 13:04:24

Try this:

<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
            // Set your code here!!
        }

        $(document).ready(readyFn); 
    })(jQuery);

</script>

@Explosion Pills 2012-09-09 23:10:39

By default when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).

Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).

If you must use document.ready, you can actually pass $ into the function call:

jQuery(function ($) { ...

@Jason 2012-09-09 23:18:27

or simply (function($){ // jQuery code here })(jQuery);

@Jason 2012-09-09 23:19:15

I tried the second version however it didn't work, the first version did but I just want to make sure I am not doubling up on calling jQuery.

@Explosion Pills 2012-09-09 23:24:08

@Jason you don't even need that; just exactly what I posted: jsfiddle.net/vcbYJ

@Yevgeniy Afanasyev 2015-08-04 05:31:19

same for Joomla

@user5742826 2016-01-18 13:21:22

Could you please see this question wordpress.stackexchange.com/questions/214858/…

@Misha Rudrastyh 2017-10-13 10:13:15

And if any selector is outside jQuery(function ($) { ..., you have to use jQuery instead of $

@Desper 2019-07-30 08:20:34

Thanks bro. Appreciate it

Related Questions

Sponsored Content

65 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

56 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

36 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

42 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 730313 View
  • 2678 Score
  • 42 Answer
  • Tags:   javascript jquery

25 Answered Questions

[SOLVED] Set a default parameter value for a JavaScript function

21 Answered Questions

[SOLVED] What is the difference between call and apply?

38 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

29 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2371147 View
  • 2206 Score
  • 29 Answer
  • Tags:   javascript jquery

Sponsored Content