1

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!

9
  • Is your enqueued JS file appearing in the source code for your website?
    – Andi North
    Aug 22 '16 at 22:17
  • Yes it is but after I just checked, it seems to be on the top in the head tag for some reason. I think this might be the problem. Aug 22 '16 at 22:19
  • Shouldn't matter too much - as long as it's included after the jquery script is - are there any errors in your browser's console?
    – Andi North
    Aug 22 '16 at 22:21
  • No there are no errors.. Aug 22 '16 at 22:26
  • Are there any console errors after you have clicked on your navigation icon?
    – Andi North
    Aug 22 '16 at 22:29
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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.