動態加載燈箱圖像（PHP，JSON，Javascript，JQuery，HTML）

Question

因此，我對此主題進行了大量研究。.我試圖制作一個動態ligthbox ，該ligthbox可以加載圖像，而無需考慮名稱或文件擴展名。 我正在使用Bootstrap燈箱 。 它分為三個步驟 ：

1. PHP文件解析為JSON文件，其中包含指定文件夾中的所有圖像。
2. Javascript在類庫中使用文件名獲取PHP創建的JSON並創建HTML 。
3. jQuery使用.on（）檢測圖像上的點擊事件 ，並為燈箱圖像賦予相同的src 。

這很好。.如果我不使用步驟2並用自己的代碼對HTML元素進行硬編碼。 如果我隨后將獲取文件放回HTML中，則JQuery無法識別動態創建的元素 。 其他Stack用戶也提出了相同的問題。 所以我認為我可能會在這些方面找到一些幫助，但是我唯一了解到的是我應該使用.on（）或.live（）而不是.click （） ，而且我根本不使用.click（） 。

所以我在我的JQuery中添加了一些console.log（） 。 而且我發現開溜 ，我的點擊事件不運行， 之前的一切一切之后運行，但我的單擊事件不會承認的Javascript改變以任何方式動態創建的那些元素，或元素。

編輯： 問題是我在運行Javascript之后將圖像加載到其中，為此必須更改：

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

與

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

編輯結束


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');
});

我在console中的結果如下：

test1
test4

如果我刪除我的提取 ，我得到這個：

test1
test4
test2
img/gal/asdf.jpg
test3

我希望有人能幫助我，這是竊聽了我這么慘 ..

Answer 1

由於您的腳本動態添加了元素，因此稍后將添加綁定偵聽器的元素，因此未處理click事件。

要解決此問題，您需要綁定文檔而不是元素。

嘗試更換它

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

隨着以下

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