[breadcrumb_simple]
JavaScript is used to induce interactivity in a WordPress page, such as hovering over to create animations and effects. Whatever fancy feature you see on the WordPress page, comes from JavaScript. Although it is very common to provide flexibility, runtime errors are very common with this. One of the most common JavaScript errors in WordPress is “jquery is not defined”. This prevents things from working or does not work on your WordPress site. Here, at the Templatetoaster WordPress website builder, see the causes of this problem and the procedure to follow to solve it in detail.
Common causes of jQuery not defined error
There could be many possibilities to encounter the undefined jQuery error. Some common problems are:
- All of your plugin conflict with other plugins.
- JavaScript executed before the DOM loaded correctly.
- Your JavaScript code is loaded before the jQuery library.
- The hosted CDN jQuery can be blocked or stopped.
Solution to the Error “Uncaught ReferenceError: jQuery is not defined”
Once you get to know the landmarks, you can see the source code by pressing Ctrl + U. A new window will open to display the source code. Here you can easily find the occurrences of “jQuery”. And, you can still correct this error by following this approach:
Step 1: Inclusion of jQuery Library
When browsing the code, make sure jQuery is included and will load before your script. Even, the jQuery should be loaded once. If it loads several times, it will cause problems.
If it is not included, pass it as the third argument in your wp_enqueue_script () function as follows:
wp_enqueue_script( ‘tt-mobile-menu’, get_template_directory_uri() .
‘/js/mobile-menu.js’, array(‘jquery’), ‘1.0’, true );
Step 2: Structure of JavaScript File
Secondly, you will make sure that your JavaScript will start as follows:
jQuery(document).ready(function()
{
jQuery(#selector) …
});
Alternative: insert the code into a function
If you want to use the default “$” symbol, you can wrap the code in a function as follows–
(function($) {
// Use $() inside of this function
$(#selector) …
})(jQuery);
Step 3: Ensure that jQuery is Loaded
Sometimes there are problems because jQuery is not loaded although it is included. To make sure that jQuery is loaded, copy the URL of the src script and paste it into the new browser tab. For example: If the src script is this:
<script src=”http://code.jquery.com/jquery-1.11.2.min.js” type=”text/javascript”></script>
