javascript - jQuery: Uncaught TypeError: $(...).click is not a function - Stack Overflow

admin管理员组

文章数量:1344965

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

Share Improve this question Follow asked Jul 2, 2017 at 20:07 user7179686user7179686

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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');
  });
});

本文标签： javascriptjQuery Uncaught TypeError ()click is not a functionStack Overflow