doudou0612 2014-12-28 21:46
浏览 94
已采纳

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

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.

  • 写回答

1条回答 默认 最新

  • dosc9472 2014-12-28 22:00
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?