jQuery is not defined in Wordpress, but my script is enqueued properly

问题

I am trying to load a separate javascript file mobile-menu.js to my Wordpress theme. When I look at the console, it says, "jQuery is not defined." However, I know that I enqueued my script files correctly. Any ideas?

HTML file:

<a href="#" id="menu-icon"></a> <!--this line wasn't here originally-->
    <div id="switchmenu"><!--switchmenu begin-->
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </div><!--switchmenu end-->

functions.php file:

function lapetitefrog_scripts() {
    wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() );
    wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );

mobile-menu.js file:

 jQuery(document).ready(function($) {
    $('#menu-icon').click(function() {
            $('#switchmenu').slideToggle("fast");
    });
});

回答1:

Add wp_enqueue_script('jquery'); before you enqueue your scripts.

回答2:

First Make sure that jquery file is include in the header, and your file requied jQuery

wp_enqueue_script( 
        'lapetitefrog-mobile-menu', 
        get_template_directory_uri() . '/js/mobile-menu.js', 
        array('jquery'), 
        '1.0', 
        true 
);

Second you should start your javascript file like:

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

// Use jQuery in place of $
jQuery(document).ready(function() {
    .....
});

回答3:

You can try:

enqueue Jquery first.

wp_enqueue_script('jquery');

and then enqueuing the latter script with JQuery dependency in 3rd argument i.e array('jquery') that's what mostly people forget.

wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );

回答4:

Wordpress ships with jQuery by default

// Adds jQuery
    add_action('init', 'childoftwentyeleven_down');

        function childoftwentyeleven_down() {

          // register your script location, dependencies and version
                wp_register_script('down',
                    get_stylesheet_directory_uri() . '/js/down.js',
                    array('jquery') );
           // enqueue the script
           wp_enqueue_script('down');

        }

回答5:

The error jQuery is not defined might also appear with jQuery code embedded in your template parts.

This happens when jQuery is added to the footer of the page, while the embedded script tries to execute in the middle of the page.

If this is the case, you need to load jQuery in the header with wp_enqueue_script(). So the last parameter needs to be false here:

wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js', array(), time(), false );

Now the code executes in the right order and jQuery will be defined.

Another solution would be to move the embedded script to a Javascript file that will also be added with wp_enqueue_script() to the footer of the page. This is up to you.

来源：https://stackoverflow.com/questions/28248113/jquery-is-not-defined-in-wordpress-but-my-script-is-enqueued-properly

标签

javascript

php

jquery

wordpress

slidetoggle