弹出多次打开后无法关闭

Question

我有一个简单的弹出窗口，可以播放电影并有一个十字架来关闭弹出窗口和电影。

这样可以正常工作一次，但是如果重新打开，则无法再次关闭弹出窗口。我们可以在这里有多个视频，出于某种原因，交叉按钮关闭是先工作，但如果弹出窗口重新打开则不行。

有人有什么建议吗？似乎交叉功能只运行一次。

$('.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

您需要更改您的关闭功能，如：

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

因为在更改父元素（如下所示）后，您无法再访问此元素。

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

Answer 2

它对我来说是这样的：

$('.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 3

您当前的点击监听器已被vimeoWrap.html(vimeoWrap.html());淘汰。

只需将监听器放在父级上，即使重置html（刚刚更改了第一行），它也能正常工作：

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