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函数。这可能会起作用。 –