jQuery .parent() не запускает скрыть.

Question

Селектор my.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? А если нет, есть ли легкое обходное решение?

Answer 1

Попробуйте этот код

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

Я думаю, вы загружаете эти элементы через AJAX

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

Answer 3

Ваш код работает просто отлично, однако вы не можете активировать событие щелчка на элементе вы связать, потому что он не имеет ширину и высота установлена ​​на него.

Установите ширину и высоту или добавьте элемент, и все будет хорошо. Попробуйте нажать на красный квадрат ниже, он будет работать на вас.

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

Answer 4

$(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 нет ничего подобного, как i konw. Таким образом, вы можете скрыть любой элемент, родительский или дочерний элемент или любой элемент! Важно только то, как вы скрываете и рассматриваете этот элемент. Потому что, когда вы скрываете родителя, элемент action (здесь overpopup - background) также скрыт в блоке своих родителей.