Not sure where I'm exactly going wrong here - I'm trying to simply hide a certain div when another one is clicked. Here is my jQuery (placed at the very bottom of the .html file):

<script>
    $(document).ready(function() {
        $(".card__container--closed").click(function () {
            $(".hide__overlay").hide();
        });
    });
</script>

<div class="hide__overlay">
    <p class="card__subtitle overlay card-overlay">NEWS</p>
</div>
<div id="card" class="card">
    ...some SVG image thing here...
</div>

However, for some reason I am getting the following error:

Uncaught TypeError: $(...).click is not a function
    at HTMLDocument.<anonymous>

I'm using jQuery 3.2.1...

Not sure where I'm exactly going wrong here - I'm trying to simply hide a certain div when another one is clicked. Here is my jQuery (placed at the very bottom of the .html file):

<script>
    $(document).ready(function() {
        $(".card__container--closed").click(function () {
            $(".hide__overlay").hide();
        });
    });
</script>

<div class="hide__overlay">
    <p class="card__subtitle overlay card-overlay">NEWS</p>
</div>
<div id="card" class="card">
    ...some SVG image thing here...
</div>

However, for some reason I am getting the following error:

Uncaught TypeError: $(...).click is not a function
    at HTMLDocument.<anonymous>

I'm using jQuery 3.2.1...

• javascript
• jquery
• html
• css

2 Answers 2

All of your problems are due to the fact that you're using jQuery 3 and lots of things have been removed since jQuery 2. Remember, major version numbers mean they're allowed to include breaking changes. For more about what's different in jQuery 3.0+, please read the jQuery 3.0 Upgrade Guide.

First, you don't need $(document).ready(). That's been simplified a long time ago to just:

$(function() {
    // your code
});

In newer versions of jQuery, the shortcut event methods like click(), have been deprecated since they're redundant. In the latest versions they've been totally removed.

Instead, you need to use .on() for setting all event listeners.

$(".card__container--closed").on('click', function() {
    // ...
});

UPDATE: You've mentioned in the ments you're having the same TypeErrors from the .hide() method. This is because it was removed in jQuery 3 as well since it often didn't play nicely with people's stylesheets. Instead, you can use addClass(), removeClass() and toggleClass() to add your own show/hide classes to the element. You'd then style those classes in your stylesheet so that you have full control over how showing and hiding is achieved.

Again, please read the jQuery 3.0 Upgrade Guide since all your issues are based on outdated methods that jQuery 3 doesn't have anymore.

use the document or other parent selector before the dynamically created elements to trigger the events on that

$(document).ready(function() {
  $(document).on('click',".card__container--closed",function () {
     $(document).find(".hide__overlay").css('display','none');
  });
});