My javascript jquery won't work?

Question

I am trying to make a mobile navigation for my site. However the jquery code won't work. You can see what I am trying to do here: jsfiddle.
I have the html in my header.php after body tag, css in my style.css
For javascript I enqueued it in my functions php:

wp_enqueue_script( 'test', get_template_directory_uri() . '/js/testJS.js', array('jquery'), true );

In my testJS.js I have this code:

( function( $ ) {
    $(".mobileButton").click(function(){
        $(this).toggleClass("toggle");
    });
} )( jQuery );

But when I click on the button nothing happens unlike my jsfiddle. Can someone tell me what I did wrong? Thanks in advance!

Answer 1

Try loading your script in the footer:

wp_enqueue_script( 'test', get_template_directory_uri() . '/js/testJS.js', array('jquery'), false, true );`

The true parameter on the end tells WordPress to load this script in the footer instead of the header.

For more information, visit the Codex: https://developer.wordpress.org/reference/functions/wp_enqueue_script/