{"id":1047,"date":"2012-10-07T17:00:21","date_gmt":"2012-10-08T00:00:21","guid":{"rendered":"http:\/\/www.virendrachandak.com\/techtalk\/\/?p=1047"},"modified":"2019-03-01T12:10:36","modified_gmt":"2019-03-01T20:10:36","slug":"wordpress-is-not-defined-even-if-jquery-is-loaded","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/wordpress-is-not-defined-even-if-jquery-is-loaded\/","title":{"rendered":"WordPress $ is not defined even if jQuery is loaded"},"content":{"rendered":"

Many times while using WordPress, if we try to use “$” to access jQuery, we get an error the “$ is not defined”. This happens because the jQuery library which is included in WordPress loads in “no conflict” mode. In the no conflict mode jQuery returns the control of “$”, and it is no longer accessible as function, variable or alias for jQuery. WordPress does this in order to prevent compatibility problems with other JavaScript libraries that can be loaded.<\/p>\n

<\/p>\n

To solve this we can use “jQuery” instead of “$”. So, instead of using the standard code with “$”<\/p>\n

\r\n$(document).ready(function(){\r\n     $(#selector) ...\r\n});\r\n<\/pre>\n
we can use the following code, which uses “jQuery” instead of “$”<\/p>\n
\r\njQuery(document).ready(function(){\r\n     jQuery(#selector) ...\r\n});\r\n<\/pre>\n
If you want to use the default “$” symbol, it can be done by wrapping the code within a function<\/p>\n
\r\n(function($) {\r\n    \/\/ You can use $() inside of this function\r\n    $(#selector) ...\r\n})(jQuery);\r\n<\/pre>\n
If you want to execute the jQuery code on document ready you can use the following instead of the above code:<\/p>\n
\r\njQuery(document).ready(function($) {\r\n    \/\/ You can use $() inside of this function\r\n    $(#selector) ...\r\n});\r\n<\/pre>\n
\n
Related Articles<\/strong>:<\/p>\n