jquery - Jquery：子を非表示ユーザーが親の内側をクリックしたとき

Question

次のコードがあり、ユーザーが親DIV内の任意の場所をクリックしたときにDIVを非表示にします。ユーザーが親DIVの外側をクリックしても、何も起こりません。

<div id="BodyField">
    <div class="video-field-new"></div>
</div>

そこで、ユーザーが#BodyField内をクリックしたときに、「video-field-new」を含むDIVを非表示にします。

背景：ビデオが新しいときに隅にあるビデオの上に小さなバナーがありますが、ユーザーがビデオを再生するときにビデオプレーヤーをブロックしたくありません。したがって、理想的には、ユーザーがクリックして#BodyField内にあるビデオを再生すると、バナーが非表示になります。

Answer 1

$('#BodyField').on('click', function() {  
    $(this).children('.video-field-new').hide();
});

.video-field-newまた、クリックイベントが親に伝播しないようにする必要があります。そうしないと、ビデオをクリックして再生すると、それ自体が非表示になります。

$('#BodyField .video-field-new').on('click', function(e) {  
    e.stopPropagation();
});

Answer 2

$(".video-field-new:parent").click(function() {
    $(this).find(".video-field-new").hide();
});

Answer 3

$("#BodyField").click(function(){ $(".video-field-new").hide(); });