0
所以我做了很多研究在這個題目.. 我試圖做一個動態ligthbox無論哪個加載名稱的圖像或文件擴展名。 我正在使用自舉燈箱。 它工作在3個步驟：動態加載圖片燈箱（PHP，JSON，使用Javascript，JQuery的，HTML）
- PHP文件解析爲JSON文件，其中包含指定的文件夾中的所有圖像。
- 的Javascript獲取PHP創建JSON，並創建HTML，類坑道文件名。
- JQuery的檢測click事件與。對（）上的圖像，並給出收藏圖像相同SRC。
這工作得很好。如果我不通過我自己使用帶有源第2步和硬編碼的HTML元素。 如果我然後把我的獲取文件放回到HTML中，我的JQuery將不會識別動態創建的元素。 其他Stack用戶詢問過相同的問題。 所以我想我可能會發現在那些一些幫助，但我學到的唯一的事情就是，我應該使用。對（）或.live（）的代替。點擊（），而我卻沒有請使用.click（）。
因此，我添加了一些console.log（）的我的JQuery。 ，我發現開溜，我click事件不運行，之前一切，一切後運行，但我單擊事件不會承認這些元素動態創建，或元素通過改變以任何方式使用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);
});
的收藏點擊事件處理：
$(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
如果我刪除我的取，我得到這個：
test1
test4
test2
img/gal/asdf.jpg
test3
我希望有人能幫助我，這是竊聽我這麼很差 ..
爲什麼'$（ '[類= 「縮略圖」]'）的'代替'$（ '縮略圖'）'，我從來沒有用過，並在這樣的jQuery中看到類 –
其實它最初是作爲數據目標=「＃燈箱」，我認爲這可能是那個竊聽，所以我改變了它，忘了它，但那部分工作正常，如果我刪除我的** JSON到HTML **文件 – Schulzen
您可以通過縮略圖onclick事件調用javascript函數。這可能會起作用。 –