jQuery .parent() won't trigger hide

Question

my .parent() selector doesn't work with .hide() function. This is my HTML:

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

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

and this part of my jQuery:

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

can anyone spot a mistake I made? I tried diffenent Actions, like adding css worked and those worked. Is hiding the parent even legal in jQuery? And if not, is there a easy workaround?

@ParthTrivedi Oh sorry, I didn't mention this.I'm trying to hide the parent. This is a fixed popup window wich leaves the background grey. I want to hide the entire thing (the .overpopup) when one clicks the background — Niqql, Nov 18 '16 at 09:20
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Nov 18 '16 at 09:35

score 1 · Accepted Answer · answered Nov 18 '16 at 09:19

1

Try this code

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

I guess, you are loading this elements via ajax

answered Nov 18 '16 at 09:19

br3t

1,646
2
20
27

This workes. But why wont my code work the same? Isn't ajax just for loading external Content? Right meow I'm not loading anything with ajax. At least that I know of... – Niqql Nov 18 '16 at 09:28

score 1 · Answer 2 · answered Nov 18 '16 at 09:23

Add some element into your div on which you have applied click.

jsfiddle with you code : https://jsfiddle.net/jp14u8pc/2/

It works well,

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

score 1 · Answer 3 · answered Nov 18 '16 at 09:40

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

I don't see any issue. You can see the code.... Let me know/view your code if issue persist.

Hiding parent is legal!!!!, There is nothing like this in jQuery as i konw. So you can hide any element, parent or child or whatever the element is! Only thing matter is that how you hide and view that element. Because as you hide the parent the action element(here overpopup--background) are also is hidden in its parents block.

score 0 · Answer 4 · answered Nov 18 '16 at 09:30

Your code works just fine, however you can't activate the click event on the element you bind because it has no width and height set to it.

Set width and height to it or add some element and it will be fine. Try to click on a red box below, it will work for you.

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

jQuery .parent() won't trigger hide

4 Answers4