jQuery .parent() 不会触发隐藏答案

【问题标题】：jQuery .parent() won't trigger hidejQuery .parent() 不会触发隐藏
【发布时间】：2016-11-18 09:13:18
【问题描述】：

我的 .parent() 选择器不适用于 .hide() 函数。这是我的 HTML：

...
<div class="overpopup">
    <div class="overpopup--background">

    </div>
    <div class="overpopup--content">
        <img src="http://placehold.it/600x600?text=Overpopup">
    </div>
</div>
...

以及我的 jQuery 的这一部分：

$(document).ready(function() {
    ...
    $('.overpopup--background').click(function(){
        $(this).parent().hide();
    });
});

谁能发现我犯的错误？我尝试了不同的操作，比如添加 css 和那些有效。在jQuery中隐藏父母是否合法？如果没有，是否有简单的解决方法？

【问题讨论】：

你在尝试什么？ :D.. 删除自己的父母？？哈哈哈..
@ParthTrivedi 哦，对不起，我没有提到这一点。我正试图隐藏父母。这是一个固定的弹出窗口，背景为灰色。我想在单击背景时隐藏整个内容（.overpopup）
Event binding on dynamically created elements?的可能重复

标签： jquery hide parent

【解决方案1】：

试试这个代码

$("body").on("click", ".overpopup--background", function() {
    $(this).parent().hide();
});

我猜，你是通过 ajax 加载这些元素

【讨论】：

这行得通。但是为什么我的代码不能正常工作呢？ ajax 不只是用于加载外部内容吗？对了喵喵我没有用ajax加载任何东西。至少我知道...

【解决方案2】：

将一些元素添加到您已应用点击的 div 中。

jsfiddle 你的代码：https://jsfiddle.net/jp14u8pc/2/

效果很好，

<div class="overpopup">
   <div class="overpopup--background">
     <p>
       Click Me
      </p>
   </div>
   <div class="overpopup--content">
     <img src="http://placehold.it/600x600?text=Overpopup">
   </div>
</div>

【讨论】：

【解决方案3】：

$(document).ready(function() {
    $('.overpopup--background').click(function(){
        $(this).parent().hide();
    });
});

div{margin:10px;}
.test{background:#FCE883; padding:10px;}
.overpopup{max-width:100%; height:auto; background:#333; color:#fff; padding:20px;}
.overpopup--background{width:auto; padding:5px 15px; background:navy; font-size:10px}
.overpopup--content{border:1px solid red; padding:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="test">
  test
<div class="overpopup">
    <div class="overpopup--background">
OVERPOPUP BACKGROUND BTN
    </div>
    <div class="overpopup--content">
        <img src="http://placehold.it/150x150?text=Overpopup">
    </div>
</div>
  </div>

我没有发现任何问题。您可以查看代码...。如果问题仍然存在，请告诉我/查看您的代码。

隐藏父级是合法的！！！！，据我所知，jQuery 中没有这样的东西。所以你可以隐藏任何元素，父元素或子元素或任何元素！唯一重要的是您如何隐藏和查看该元素。因为当您隐藏父级时，动作元素（此处为 overpopup--background）也隐藏在其父级块中。

【讨论】：

【解决方案4】：

您的代码可以正常工作，但是您无法在您绑定的元素上激活 click 事件，因为它没有设置宽度和高度。

给它设置宽度和高度或添加一些元素就可以了。尝试点击下面的红色框，它会为你工作。

<div class="overpopup">
    <div class="overpopup--background" style="width:200px; height:200px; border:1px solid red;">
    </div>
    <div class="overpopup--content">
        <img src="http://placehold.it/600x600?text=Overpopup">
    </div>
</div>

【讨论】：