Jquery：当用户在父<div> </div> </div>中单击时隐藏子<div>

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(); });