jquery 灯箱事件未触发

Question

我正在开发一个带有缩略图的灯箱，用于学习过程。我的代码存在以下问题:

1. 叠加层出现后事件未触发。它通过 jquery 添加了内容。(如果您还可以解释为什么它不触发事件处理程序，那就太好了)。

   1. 是否有适合学习目的的类似简单灯箱。

代码如下:

$(function(){

  var thumbCode = $('.thumbnails').clone() //getting thmbnails html

      ,closeBtn = "<span class='closeBtn'>&times; CLOSE</span>" // code for close button

      ,displayArea = "<div class='imgDisArea'><img class='fullImg'></div>"
      ,imgSrc



  $('.thumbnail').on('click', function() {
    var clickedThumbnailSrc = $(this).data('src'); // value of data-src of clicked thumbnail
    $('<div class="bg-overlay"></div>').appendTo('body').fadeIn(300,drawContent(clickedThumbnailSrc)); 
  });

  // Creating display of light box;

  function drawContent(disImgSrc) {

    $('.bg-overlay').append(closeBtn).append(displayArea).append(thumbCode);
    $('.bg-overlay img.thumbnail').removeClass('thumbnail').addClass('lb-thumb');
    changeImgSrc(disImgSrc); 
  }

  $('.lb-thumb').on('click', function() {
    console.log('overlay thumbs clicked');
    var clickedThumbnailSrc = $(this).data('src'); // value of data-src of clicked thumbnail
    changeImgSrc(disImgSrc);
  });

  function changeImgSrc (disImgSrc) {
    $('img.fullImg').attr('src',disImgSrc);
  };

  $('.closeBtn').on('click', function(){
    console.log('close clicked');
    $('.bg-overlay').remove();
  });

});

body {
  position: relative;
  padding: 0;
  margin: 0;
}

/* lb container styles */

.lb {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

/* galery thumbnail styles */

ul.thumbnails {
  width: 100%;
  text-align: center;
  margin:0 auto;
  padding: 0;
  background: #ccc;
  list-style: none;

}

ul.thumbnails li {
  display: inline-block;
}

ul.thumbnails li img.thumbnail {
  opacity: 0.8;
}

ul.thumbnails li img.thumbnail:hover {
  opacity: 1;
  cursor: pointer;
}

/* backgournd overlay */

.bg-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  transition: all 0.5s ease;
  display: none;
  z-index: 1090;
}

.closeBtn {
  display: inline-block;
  position: absolute;
  right: 20px;
  top:20px;
  z-index: 2010;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.imgDisArea{
  height: 80%;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  margin-bottom: 10px;
}

img.lb-thumb {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lb">

  <ul class="thumbnails">
    <li><img class="thumbnail" src="_images/kofidasw1cc-nathan-anderson.jpg" data-src="_images/kofidasw1cc-nathan-anderson.jpg" width="100" height="100"></li>
    <li><img class="thumbnail" src="_images/PK_Vivi_Gerusalemme_ora_TESTATA_1280x720_1.jpg" data-src="_images/PK_Vivi_Gerusalemme_ora_TESTATA_1280x720_1.jpg" width="100" height="100"></li>
    <li><img class="thumbnail" src="_images/rk7z5yqmcko-james-sutton.jpg" dta-src="_images/rk7z5yqmcko-james-sutton.jpg" width="100" height="100"></li>
    <li><img class="thumbnail" src="_images/xqv9qdgosas-timothy-meinberg.jpg" data-src="_images/xqv9qdgosas-timothy-meinberg.jpg" width="100" height="100"></li>
  </ul>

</div>

Answer 1

您可以使用 仅 CSS 制作一个简单的灯箱(如果它适合您的元素):
您必须创建 2 个 block :

#normal {
        max-width: 50%;
        height: 200px;
    }

    #lightbox {
        /* First, we hide the lightbox block */
        display: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
	    background: rgba(0,0,0,0.9);
	    text-align: center;
    }
    
    #lightbox img {
        max-width: 80%;
	    max-height: 75%;
	    margin-top: 5%;
    }

    /* When the lightbox is the target of a link, we display it */
    #lightbox:target {
        display: block;
        outline: none;
    }

<a id="normal" href="#lightbox">
        <img src="https://cdn.meme.am/cache/instances/folder965/500x/55103965.jpg">
    </a>
    <a id="lightbox" href="#_">
        <img src="https://cdn.meme.am/cache/instances/folder965/500x/55103965.jpg">
    </a>

这是一个例子，制作灯箱的方法有很多种，而且它是高度可定制的。我实际上在一个大元素中使用这种方法，它工作得很好，包括灯箱中的评论(类似于 facebook 对其灯箱所做的)。
A Codepen which use this
MDN - CSS :target selector