wp enqueue script - Bootstrap and jQuery error: $ is not defined

admin管理员组

文章数量:1206735

I'm trying to use the Bootstrap collapse component and just can't get it to work. I believe the HTML is proper, but whenever I click on the element that should trigger the collapse, I get an Uncaught ReferenceError: $ is not defined error in the console, pointing to the custom.js file which contains the $('.collapse').collapse() function. I assumed that I'm just enqueueing the scripts in the wrong order, but everything seems okay to me:

function my_scripts() {
    wp_enqueue_script( 'bootstrap-jquery','.6.0.min.js', '', '1.0.0', true );
    wp_enqueue_script( 'bootstrap-js' , '/[email protected]/dist/js/bootstrap.bundle.min.js', array('bootstrap-jquery'), '1.0.0', true );
    wp_enqueue_script( 'my-js', get_template_directory_uri() . '/js/custom.js' );

    wp_enqueue_style( 'bootstrap-css', '/[email protected]/dist/css/bootstrap.min.css', '', '1.0.0', 'all' );
    wp_enqueue_style( 'my-css', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'google-fonts', ':wght@400;700', false );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Am I missing something important, as I really can't figure it out. :/

Thank you!

I'm trying to use the Bootstrap collapse component and just can't get it to work. I believe the HTML is proper, but whenever I click on the element that should trigger the collapse, I get an Uncaught ReferenceError: $ is not defined error in the console, pointing to the custom.js file which contains the $('.collapse').collapse() function. I assumed that I'm just enqueueing the scripts in the wrong order, but everything seems okay to me:

function my_scripts() {
    wp_enqueue_script( 'bootstrap-jquery','https://code.jquery.com/jquery-3.6.0.min.js', '', '1.0.0', true );
    wp_enqueue_script( 'bootstrap-js' , 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('bootstrap-jquery'), '1.0.0', true );
    wp_enqueue_script( 'my-js', get_template_directory_uri() . '/js/custom.js' );

    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '1.0.0', 'all' );
    wp_enqueue_style( 'my-css', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700', false );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Am I missing something important, as I really can't figure it out. :/

Thank you!

• jquery
• wp-enqueue-script
• twitter-bootstrap

Share Improve this question asked Apr 4, 2022 at 20:06 TatexTatex 3344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

WordPress uses jQuery (and others) in noConflict mode, meaning that $ isn't automatically available. To use $ in your jQuery script, wrap your code in this:

jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    // [ your code goes here ]
} );

Reference: the User Contributed Note from 'bcworkz' on the manual page for wp_enqueue_script()

Also note: you shouldn't try to load a new jQuery (which is what your bootstrap-jquery seems to be doing, if I'm reading this right). Instead, add jquery to the dependencies:

function my_scripts() {
    wp_enqueue_script( 'bootstrap-js' , 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'my-js', get_template_directory_uri() . '/js/custom.js' );

    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '1.0.0', 'all' );
    wp_enqueue_style( 'my-css', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700', false );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

本文标签： wp enqueue scriptBootstrap and jQuery erroris not defined