Popup cannot close once opened multiple times

Question

I have a simple popup that plays a movie and have a cross to close the popup and movie.

This works fine once, however if reopened, you cannot close the popup again. We could have multiple videos on here, for some reason the cross button t close is working first, but not if the popup is reopened.

Anyone have any suggestions? It seems as though the cross function is only working once.

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

Thanks

Answer 1

It works like this for me:

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

Your current click-listener becomes obsolete by vimeoWrap.html(vimeoWrap.html()); .

Just put the listener on the parent and it will work even when you reset the html (just changed the first line):

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

Answer 3

You need to change your close function like:

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

Because after you change parent element (like below) you can't access this element anymore.

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