无法在 WordPress 子主题中使用 jQuery

Question

I can't figure out how to use jQuery in my WordPress child theme scripts. From my research on SO , I have enqueued my external JavaScript file and have tried coding the jQuery commands in NoConflict mode with no success. Here is the barebones template I'm experimenting on right now (it is essentially a blank page.php and I added a button and paragraph at the bottom):

<?php
/**
 *
 * Template Name: My JQ Template
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header(); ?>

<?php
    global $wpdb;

    $course_result = $wpdb->get_results('SELECT * FROM SC_COURSES ORDER BY COURSE_NAME');
?>

<div id="primary" <?php //generate_content_class();?>>

</div>

<main id="main" <?php generate_main_class(); // Page title and content ?>> 
    <?php
    do_action( 'generate_before_main_content' );

    while ( have_posts() ) : the_post();
        get_template_part( 'content', 'page' );
        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || '0' != get_comments_number() ) : ?>
            <div class="comments-area">
                <?php comments_template(); ?>
            </div>
        <?php endif;
    endwhile;

    do_action( 'generate_after_main_content' );
    ?>
    <br>    
    <div class="container">
        <div>       
            <input id="testbutton" type="button" onClick="myFunction()" value="POP!">
            <p>This is a test</p>
        </div>  

    </div><!-- container -->

</main><!-- #main -->

    <?php
    do_action( 'generate_after_primary_content_area' );

    get_footer();
    ?>

In functions.php, I have the following:

<?php
function enqueue_child_theme_styles() {
    if ( is_page_template( 'jqtemplate.php' ) ) {
        //deregister the parent bootstrap style and script  
        wp_deregister_style( 'bootstrap' );
        wp_deregister_script( 'bootstrap' );
        wp_deregister_script( 'mycustomjs' );

        //enqueue my child theme stylesheet
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

        //enqueue bootstrap in the child theme 
        wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
        wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

        //Enqueue the custom jQuery specific scripts
        wp_enqueue_script('mycustomjs', get_stylesheet_directory_uri().'/js/mycustomjs.js', array('jquery'), NULL, true);
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX); 

Within mycustomjs.js, I have the following:

jquery(document).ready(function(){
    jquery("p").mouseenter(function(){
        jquery("p").text("This is some new text");
    });
}); 


function myFunction() {
    var txt;
    if (confirm("Press a button, mkay!")) {
        txt = "You pressed OK!";
    } else {
        txt = "You pressed Cancel!";
    }
    document.getElementById("testbutton").value = txt;
}

I am positive the script is loading, because that little demo with changing the button text works. I know the Bootstrap styles and scripts are loading because in the production version they are visible.

I can't make jQuery do anything, though. I have tried adding var j = jQuery.noConflict(); and then using j instead of jquery as described here , I have changed jquery to jQuery, and I have tried putting the jQuery lines directly into the jqtemplate.php header with no success.

I know WordPress includes jQuery, so what am I missing here?

Answer 1

WordPress includes jQuery indeed. But it still has to be loaded .

After loading jQuery you just have to make sure that you use jQuery instead of jquery . like this:

jQuery( document ).ready( function() {

    alert( 'test to see if this is working' );

    jQuery("p").mouseenter( function() {

        jQuery("p").text("This is some new text"); 
    }); 
});