多次打開后，彈出窗口無法關閉

Question

我有一個播放電影的簡單彈出窗口，並且有一個十字架來關閉彈出窗口和電影。

一次可以正常工作，但是如果重新打開，則無法再次關閉彈出窗口。 我們可能在這里放多個視頻，由於某種原因，十字按鈕t close首先起作用，但是如果重新打開了彈出窗口，則無法起作用。

有人有什么建議嗎？ 似乎交叉函數只工作一次。

 $('.video-popup').click(function(e) { $('.overlay').fadeIn(); $(this).parent('.video-img').find('.video-container, .close-video').fadeIn(); e.stopPropagation(); }); $('.close-video').click(function(f) { vimeoWrap = $('.video-container'); vimeoWrap.html(vimeoWrap.html()); $('.overlay, .video-container, .close-video').fadeOut(); f.stopPropagation(); }); 

 .video-container { position: fixed; z-index: 99; max-width: 800px; left: 50%; top: 50%; height: 500px; display: none; width: 100%; padding: 0 15px; } .overlay { position: fixed; height: 100%; width: 100%; background: rgba(0, 14, 60, 0.8); z-index: 9; display: none; top: 0; left: 0; right: 0; } .close-video { position: absolute; z-index: 99; top: -50px; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pdf-video-block"> <div class="video-img"> <img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup"> <div class="video-container"> <div class="close-video">X</div> <iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> </div> </div> 

謝謝

Answer 1

它對我來說是這樣的：

 $('.video-popup').click(function(e) { $('.overlay').fadeIn(); $('.video-container, .close-video').fadeIn(); e.stopPropagation(); e.stopPropagation(); }); $('.close-video').click(function(f) { //vimeoWrap = $('.video-container'); //vimeoWrap.html(vimeoWrap.html()); $('.overlay, .video-container, .close-video').fadeOut(); f.stopPropagation(); }); 

 .video-popup { width: 100px; height: 100px; } .video-container { position: fixed; z-index: 99; max-width: 800px; left: 50%; top: 50%; margin-top: 0; margin-left: 0; height: 500px; display: none; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 100%; padding: 0 15px; } .overlay { position: fixed; height: 100%; width: 100%; background: rgba(0, 14, 60, 0.8); z-index: 9; display: none; top: 0; left: 0; right: 0; } .close-video { position: absolute; z-index: 99; top: 100px; left: 20px; display: none; cursor: pointer; color: white; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup"> <div class="overlay"></div> <div class="video-container"> <div class="close-video" style="display: block;">X</div> <iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> 

Answer 2

vimeoWrap.html(vimeoWrap.html());您當前的單擊偵聽器過時了vimeoWrap.html(vimeoWrap.html()); 。

只需將偵聽器放在父對象上，即使您重置了html（只是更改了第一行），它也將起作用：

$('.video-container').on("click",".close-video", function(f)  {
  ...
});

Answer 3

您需要更改關閉功能，例如：

$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {

因為在更改父元素（如下所示）之后，您將無法再訪問此元素。

vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());