I can't get my jQuery Event Listener to work

Question

Trying to set up an on click event listener for a submit button. Here is my jQuery code -

(function($) {
  console.log('working');

  $("#submit").on('click', function(event) {
    event.preventDefault();
    console.log('test');
  });
})(jQuery);

Here is the HTML -

<input type="submit" id="submit" value="Submit Result" />

I'm doing this on a Word Press site. I know the .js file is linked correctly because I see the 'working' console log.

What is wrong with the code?

Edit -

Just tried this -


  $(window).on('click', function() {
    console.log('test');});

And that works. Is there an issue with how I have my ID set up in the HTML?

You need to use a document.ready event handler, not an IIFE. https://learn.jquery.com/using-jquery-core/document-ready/ — Rory McCrossan, Mar 21 '20 at 18:40

score 0 · Answer 1 · answered Mar 21 '20 at 17:44

0

Use 'jQuery' instead of '$' in WordPress to avoid conflict

(function(jQuery) {
  console.log('working');

  jQuery("#submit").on('click', function(event) {
    event.preventDefault();
    console.log('test');
  });
})(jQuery);

answered Mar 21 '20 at 17:44

Bilal Naseer

156
1
2
16

The OP provides `jQuery` in to the IIFE. The `$` is already aliased. – Rory McCrossan Mar 21 '20 at 18:39

score 0 · Accepted Answer · answered Mar 21 '20 at 17:54

The code you wrote is fine. I assume you linked the Javascript file on the top of the page - which doesn't work out.

You have to add the <script> tag on the bottom of your html for it to work.

    <input type="submit" id="submit" value="Submit Result" />

    // Rest of HTML

    <script src="link/to/script.js"></script>
  </body>
</html>

score 0 · Answer 3 · answered Mar 21 '20 at 17:54

The submit button will still run the forms POST action. You can hide the real submit button, and create a button to trigger the submit (usually after validation).

As for comments about $ and jQuery conflicts etc... Using the encapsulation code below you should be fine to use either one.

<button id="preSubmit">Submit</button>
<input style="display:none;" type="submit" id="serverSubmit">

(function ($) {
    $(function () {  //document.ready

        $("#preSubmit").on('click', function(e) {
            e.preventDefault();
            $("#serverSubmit").trigger("click");
        });     

    });
})(jQuery);

I can't get my jQuery Event Listener to work

3 Answers3