skip to Main Content

I’ve got a wordpress site running. I’ve bound a jquery click event to a <div> tag using the ID as a selector.

The relevant code is below:
js:

<script>
    $(document).ready(function() {
        $( "#homepage_contact_form" ).click(function() {
          alert( "Handler for .click() called." );
        });
    });
</script>

html:

<div id="homepage_contact_form" class="et_pb_module et_pb_contact_form_container clearfix  et_pb_contact_form_0">

However, the event is not triggering.

The thing works if I simulate it in jsfiddle (https://jsfiddle.net/yL4gjc1d/), but it doesn’t work on the actual page.

Relevant information:

  • This is a WordPress site using the Divi theme. The js is being inserted through the ePanel
  • You can find the actual page with the source code above at http://www.inkcorporate.com

Thanks

3

Answers


  1. Please replace all $ by jQuery. I think it works with:

        jQuery(document).ready(function() {
            jQuery( "#homepage_contact_form" ).click(function() {
              alert( "Handler for .click() called." );
            });
        });
    

    Hope that helps.

    Login or Signup to reply.
  2. Have you imported the jQuery library on your page?
    eg:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    

    Make sure you put it before the link to your local .js file as well.

    Login or Signup to reply.
  3. At the end of your jquery library file there is jQuery.noConflict();

    This means the the $ is not available and you will have to use jQuery instead

    // use jQuery as the initial object and pass $ in as 
    // the parameter to the ready method so that $ is available inside it
    jQuery(document).ready(function($) {
      $("#homepage_contact_form").click(function() {
        alert("Handler for .click() called.");
      });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search