Jquery：当用户点击父级<div>时隐藏子级<div>

Question

我有以下代码，希望在用户单击其父级DIV内任何位置时隐藏一个DIV。 如果用户单击父级DIV之外的任何位置，则不会发生任何事情。

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

我希望当用户点击#BodyField内部时，DIV“video-field-new”会隐藏。

背景：我有一个小横幅，它在视频是新时覆盖在角落里，但当用户播放视频时，我不希望它阻挡视频播放器。所以理想情况下，当用户点击播放视频（位于#BodyField内）时，横幅将隐藏。

- Dan

---

$("#BodyField").click(function(){$(this).children("div").hide()} - Gaurav Pandey

@gaurav 这将导致 每个 子 div 元素被隐藏。 - BenM

但是如果他给许多div赋予相同的类名呢？ - Gaurav Pandey

看我的回答。最好使用 $(this).children('selector')。 - BenM

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

- BenM

---

当我添加上述内容时，出现了“Uncaught TypeError: Object [object Object] has no method 'on'”的错误。有什么想法吗？ - Dan

听起来您正在使用旧版本的jQuery。请改用live()，或升级jQuery（更好的解决方案）。 - BenM

太好了！这个方法可行，但是有一个问题。这个功能条在 Vimeo 视频中的 iFrame 中，当点击 iFrame 时它不会消失。这个问题能解决吗？ - Dan

很遗憾，因为“iframe”元素不会注册“click”事件，所以无法实现。 - BenM

糟糕！我会尝试用透明的div覆盖播放按钮来欺骗它。感谢您的帮助！ - Dan

Answer 2

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

- dwild

Answer 3

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

- apoq