即使在wp_register_script依赖关系数组中定义，jQuery也没有在Wordpress Theme中定义

Question

I'm having troubles including gridstack.js into my theme.

This is how my code is:

function custom_scripts() {   

    wp_register_script( 'gridstack.min', get_template_directory_uri() . '/js/gridstack.min.js', array( 'jquery', 'underscore', 'jquery-ui-core' ), '201412028' );   

    wp_enqueue_script( 'gridstack.min' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

And the output is:

<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/underscore.min.js?ver=1.6.0'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/ui/core.min.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-content/themes/manfredinator/js/gridstack.min.js?ver=201412028'></script>

But Firebug still gives me "TypeError: $ is undefined".

I have a solution for this but i don't like it:

function custom_scripts() {   
   wp_register_script( 'jQuery.min', get_template_directory_uri() . '/js/jquery-1.10.2.min.js', array(), '1.10.2' );   
   wp_enqueue_script( 'jQuery.min' );

    wp_register_script( 'gridstack.min', get_template_directory_uri() . '/js/gridstack.min.js', array( 'underscore', 'jquery-ui-core' ), '201412028' );   
    wp_enqueue_script( 'gridstack.min' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

So my question is: why does the jQuery library included in WP not work for plugins (I have also tried another plugin that uses jQuery.min and I had the same problem) and what is the best way of solving this problem.

Answer 1

This is because the version of jQuery included with WordPress is in noConflict mode. This means the $ shortcut is not available, but jQuery still is.

If it is in your code, you can simple wrapp all of you code in an Immediately-Invoked Function Expression (IIFE) like below:

(function($) {
    //Your code here.
})(jQuery);

Or, if you are wrapping everything in a document ready handler, use this.

jQuery(function($) {
    //Your code here.
});

If it's a problem with a jQuery plugin you are trying to use, you will need to patch the plugin code. Also, consider contacting the plugin author to fix their code. Plugins should not depend on the $ shortcut being defined.