Javascript 如何在JS中为动态图像制作灯箱

我正在尝试创建可以在网格内单击的图像。当用户单击图像时，我希望使用灯箱弹出图像。但是，这适用于HTML中硬编码的图像，但不适用于动态放置在网站上的图像。我之所以有动态图像，是因为用户可以从特定日期选择图片并显示它们。但是灯箱不能处理这些图像。有人知道我该怎么做或修复它吗？我的displayGallery工作正常，它可以显示图片和所有内容，但灯箱无法处理我的displayGallery显示的图片

这是我的显示库javascript，它在我的库中动态显示我的图片

function displayGallery(gallery)
{
 const gal = document.getElementById('gallery');

 /*remove previous images*/
 document.getElementById('gallery').innerHTML = "";

 for(let i = 0; i < gallery.length; i++)
 {
   const img = new Image();
   //alert(gallery[i]);
   img.src = gallery[i];
   gal.append(img);
 }
}

我的CSS

#gallery {
  width: 80%;
  margin:auto;
  height: 1000px;
  display: flex;
  padding: 0 -8px;
  text-align: center;
  flex-wrap: wrap;
  overflow-y: auto;


}

#lightbox{
   position: fixed;
   z-index: 1000;
   top: 0;
   width: 100%;
   height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
   display: none;
 }

 #lightbox.active
 {
  display: flex;
  justify-content: center;
  align-items: center;
 }

#lightbox img
 {
   max-width: 90%;
   max-height: 80%;
   padding: 4px;
   background-color: black;
   border: 2px solid white;
}

.grid{
  display: grid;
  grid-template-columns: repeat(3,300px);
  justify-content: center;
  padding: 15px;
  grid-gap: 10px;
  height:100vh;

 }
.grid img{
  width: 350px;
  height: 200px;
  cursor:pointer;
  padding: 4px;
}
                                                                                                                                                 

我的HTML中的脚本

<!-- Scripts -->
    <script src="Sunset-GetLatestPicture.js"></script>
    <script src="Sunset-SearchSunset.js"></script>
    <script src="Sunset-Displaygallery.js"></script>
    <script src="Sunset-MinMaxCalender.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.dropotron.min.js"></script>
    <script src="assets/js/jquery.scrolly.min.js"></script>
    <script src="assets/js/jquery.scrollex.min.js"></script>
    <script src="assets/js/browser.min.js"></script>
    <script src="assets/js/breakpoints.min.js"></script>
    <script src="assets/js/util.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="Sunset-Lightbox.js"></script>

    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>

    <script>

动态添加图像后是否挂起单击事件？是的，我的lightbox脚本位于创建Gallery的脚本之后，但它们是否按该顺序调用？您将galley脚本包装在函数中。由于gallery脚本正在插入动态内容，因此需要从某处获取动态内容，例如，从服务器获取URL列表以构建gallery。从服务器获取内容的函数是异步的，因此它们可能不会按照编写的顺序发生，除非您采取特定步骤确保它们会发生。啊，我明白您的意思。所以我有我的Sunset-GetLatestPicture.js，它在HTML页面加载时调用gallery脚本。然后，Sunset-SearchSunset.js也会调用它，并根据从用户输入中获取的图片更改图库。我可以给你我的网站，如果你想在源代码，这是一个简单的网站。

<!-- Scripts -->
    <script src="Sunset-GetLatestPicture.js"></script>
    <script src="Sunset-SearchSunset.js"></script>
    <script src="Sunset-Displaygallery.js"></script>
    <script src="Sunset-MinMaxCalender.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.dropotron.min.js"></script>
    <script src="assets/js/jquery.scrolly.min.js"></script>
    <script src="assets/js/jquery.scrollex.min.js"></script>
    <script src="assets/js/browser.min.js"></script>
    <script src="assets/js/breakpoints.min.js"></script>
    <script src="assets/js/util.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="Sunset-Lightbox.js"></script>

    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>

    <script>