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个块：

#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%; 
 
\t  background: rgba(0,0,0,0.9); 
 
\t  text-align: center; 
 
    } 
 
    
 
    #lightbox img { 
 
     max-width: 80%; 
 
\t  max-height: 75%; 
 
\t  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