jQuery event handler does not work in this code

Question

I am currently unable to get this code to work using jQuery. The same event works when I add it specifically on the "a" link element. I would expect jQuery to register an alert to be shown when the link is clicked but nothing happens when I click on that link. I am running this html in Chrome and DevTools console does not show any errors at all! I am not sure what I could be doing wrong as I am doing it just by the book! Overall I have seen jQuery is not working for anything javascript but I have posted this small piece of code to illustrate. Appreciate any help figuring out what I could be doing wrong!

<html>

<head>
  <!-- jQuery version 3.3.1 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" />
  <script>
    $(document).ready(function() {
      $("a").click(function() {
        //This should show an alert when any link on the page is clicked.
        alert("This is a test");
      })
    });
  </script>
</head>

<body>
  <a href="#">Click here to see alert</a>
  <!-- This does not work! -->
  <!-- This works fine!
                <a href="#" onclick="javascript:alert('This is a test');">Click here to see alert</a> -->
</body>

</html>

Rory McCrossan · Accepted Answer · 2019-03-12 14:12:07Z

1

The problem is because a script tag is not self-closing. You need to add a separate </script> tag after your jQuery.js reference:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("a").click(function() {
        console.log("This is a test");
      })
    });
  </script>
</head>
<body>
  <a href="#">Click here to see alert</a>
</body>
</html>

The reason your onclick="javascript:alert('This is a test');" still works is because it doesn't rely on the broken reference to jQuery.

That said, you should avoid using on* event attributes as they are very outdated. Unobtrusive event handlers are by far the best practice here.

answered Mar 12, 2019 at 14:12

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SneakyPigeon Over a year ago

Wow, that worked! Thank you so much for the quick reply! :)

SneakyPigeon Over a year ago

I cannot visibly upvote the answer but I have upvoted. thanks again!

Collectives™ on Stack Overflow

jQuery event handler does not work in this code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related