I have a very simple jQuery function that is supposed to toggle a div's visibility:

jQuery( ".signUp" ).click(function() {

The HTML is a simple signup form (hidden fields left out for brevity):

<p><a class="signUp" href="#">Sign Up!</a></p>
<div class="signUpForm">
    <h3 class="title">Join our email list!</h3>
        <form action="<url goes here>" method="POST">
        <label for="email">Email:</label><input type="text" id="email" name="Email"/></br><br />
        <input type="Submit" value="Submit" /><br />

The script looks like it was enqueued properly, but it's not working on the WP page. It does work just fine on JSFiddle (http://jsfiddle.net/danromanchik/6taton4p/).

Any ideas what I'm doing wrong?


  • How are you including the javascript? Are you using wp_enqueue_script() inside a callback hook? Feb 12, 2015 at 17:38
  • 2
    you're probably trying to bind the event handler before the markup exists in the DOM, your code should be wrapped in ready
    – Milo
    Feb 12, 2015 at 18:01
  • After beating on it some more, I got it to work. The code in toggleForm.js is now: 'jQuery(document).ready(function(){ jQuery( ".signUp" ).click(function() { jQuery('.signUpForm').toggle(); }); });'
    – DanR
    Feb 13, 2015 at 19:15

2 Answers 2


You need to wrap your jQuery click event in a DOM ready function.

(function($) {
    $('.signUp').click(function() {

You need to add your script though:

  1. Using wp_enqueue_script() in themes function.php or
  2. Use wp_footer action to add your jQuery script.

If your html in a shortcode then register your script using wp_register_script('YOUR_HANDLE_NAME)

and use wp_enqueue_script('YOUR_HANDLE_NAME)

Hope It helps...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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