0

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

jQuery( ".signUp" ).click(function() {
    $('.signUpForm').toggle();
});

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 />
    </form>
</div>

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?

Thanks.

  • How are you including the javascript? Are you using wp_enqueue_script() inside a callback hook? – Andrew Bartel Feb 12 '15 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 '15 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 '15 at 19:15
1

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

(function($) {
    $('.signUp').click(function() {
        $('.signUpForm').toggle();
    });
})(jQuery);
0

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, privacy policy and cookie policy

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