动态加载灯箱图像（PHP，JSON，Javascript，JQuery，HTML）

Question

所以我对这个主题进行了很多的研究。 我正在尝试制作动态ligthbox ，无论名称或文件扩展名如何，都会加载图片。 我正在使用 Bootstrap灯箱。 它适用于 3个步骤：

1. PHP 文件解析为 JSON 文件，其中包含指定文件夹中的所有图片。
2. Javascript 获取PHP创建的 JSON ，并在包含文件名的类库中创建 HTML 。
3. JQuery 在图片上使用 .on（）检测点击事件，并为灯箱图片提供相同的 src 。< / LI>

   这很好..如果我不使用第2步并使用我自己的源代码对HTML元素进行硬编码。 如果我然后将获取文件放回HTML中，我的 JQuery将无法识别动态创建的元素。 其他Stack用户也提出了同样的问题。 所以我想我可能会找到一些帮助，但我学到的唯一的事情就是我应该使用 .on（）或 .live（）而不是 .click（），我根本没有使用 .click（）。

   所以我在 JQuery 中添加了一些 console.log（）。 我发现 bugger ，我的点击事件没有运行，之前的所有 以及之后的所有，但是我的点击事件无论如何都无法识别动态创建元素或由Javascript更改元素。

   编辑： 问题是我在Javascript运行后加载了图像，为此我需要更改：

   $('[class="thumbnail"]').on('click', function (event) {
   

   $(document).on('click', '.thumbnail', function (event) {
   

   END OF EDIT
   
   
   PHP到JSON ：

   <?php
   header('Content-Type: text/json');
   echo '{"images":[';
   if ($handle = opendir('img/gal/')) {
   $result = "";
       while (false !== ($entry = readdir($handle))) {
   
           if ($entry != "." && $entry != "..") {
               $result .= '{"name":"'.$entry.'"},';
   
           }
       }
   
       echo substr($result, 0,-1);
       closedir($handle);
   }
   echo "]}";
   ?>
   

   JSON到HTML ：

   fetch('gal.php')
       .then((response) => {
           if (response.status == 200) {
               return response.json();
           } else {
   
           }
       })
       .then((json) => {
           var content = document.getElementsByClassName('gallery');
           for (var i = 0; i < json.images.length; i++) {
               content[0].innerHTML += "<div class='col-xs-12 col-sm-3'> <a href='#' class='thumbnail' data-toggle='modal' data-target='#lightbox'><img src='img/gal/" + json.images[i].name + "' alt='..' ></a></div>";
           }
       }).catch((error) => {
           console.log(error);
       });
   

   LIGHTBOX点击事件处理程序：

   $(document).ready(function () {
       var $lightbox = $('#lightbox');
       console.log('test1');
       $('[class="thumbnail"]').on('click', function (event) {
           console.log('test2');
           var $img = $(this).find('img'),
               src = $img.attr('src'),
               alt = $img.attr('alt'),
               css = {
                   'maxWidth': $(window).width() - 100,
                   'maxHeight': $(window).height() - 100
               };
   
           console.log(src);
           console.log('test3');
   
           $lightbox.find('.close').addClass('hidden');
           $lightbox.find('img').attr('src', src);
           $lightbox.find('img').attr('alt', alt);
           $lightbox.find('img').css(css);
       });
       $lightbox.on('shown.bs.modal', function (e) {
           var $img = $lightbox.find('img');
           $lightbox.find('.modal-dialog').css({
               'width': '40vw'
           });
           $lightbox.find('.close').removeClass('hidden');
       });
       console.log('test4');
   });
   

   我在控制台中的结果如下：

   test1
   test4
   

   如果我删除 fetch ，我会收到：

   test1
   test4
   test2
   img/gal/asdf.jpg
   test3
   

   我希望有人能帮助我，这让我很烦恼严重 ..

Answer 1

由于脚本动态添加元素，因为稍后会添加侦听器绑定的元素，因此未处理click事件。

要解决此问题，您需要绑定文档而不是元素。

尝试替换此

$('[class="thumbnail"]').on('click', function (event) {

使用以下

$(document).on('click','.thumbnail',function(event){