Question

我不知道我在哪里出错了 - 我想在点击另一个div时隐藏某个div。这是我的jQuery（放在.html文件的最底部）：

<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>

但是，出于某种原因，我收到以下错误：

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

我正在使用jQuery 3.2.1 ...

Answer 1

你所有的问题都是因为你使用的是jQuery 3，并且自jQuery 2以来已经删除了很多东西。请记住，主要的版本号意味着他们可以包含重大更改。有关jQuery 3.0+的不同之处，请阅读jQuery 3.0 Upgrade Guide。

首先，您不需要$(document).ready()。很久以前就被简化为：

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

在较新版本的jQuery中，像click()这样的快捷方式事件已被弃用，因为它们是多余的。在最新版本中，它们已被完全删除。

相反，您需要使用.on()来设置所有事件侦听器。

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

更新：您在评论中提到，TypeError方法提供了相同的.hide()。这是因为它在jQuery 3中被删除了，因为它通常不能很好地与人们的样式表一起使用。相反，您可以使用addClass()，removeClass()和toggleClass()将自己的show / hide类添加到元素中。然后，您可以在样式表中设置这些类的样式，以便您可以完全控制如何实现显示和隐藏。

再次，请阅读jQuery 3.0 Upgrade Guide，因为您的所有问题都基于jQuery 3不再拥有的过时方法。

Answer 2

在动态创建的元素之前使用document或其他parent选择器来触发事件

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

jQuery：未捕获TypeError：$（...）。click不是函数

2 个答案: