Não use o evento window.onload
porque ele é assíncrono com o Ajax. Dentro dele você está tentando atribuir eventos de clique à imagens que só serão retornadas após o Ajax. desta forma, o result.onclick
não achará as imagens no tempo de execução.
Altere o window.onload
para uma função normal e chame-a após o retorno do Ajax.
Altere:
window.onload = () => {
...
}
para:
var Load = () => {
document.querySelectorAll('[data-target]').forEach((result) => {
result.onclick = (e) => {
document.querySelector(".modal-card-body").innerHTML = e.target.outerHTML;
let modal = document.getElementById(result.getAttribute('data-target'))
modal.classList.toggle("is-active")
modal.querySelector('.delete').onclick = () => { modal.classList.toggle("is-active") }
}
})
}
Veja que no result.onclick
incluí um parâmetro (e)
para pegar a imagem clicada e joga-la na modal com:
document.querySelector(".modal-card-body").innerHTML = e.target.outerHTML;
No Ajax, chame a função Load()
no final do success
:
var folder = "img/";
$.ajax({
url: folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if (val.match(/\.(jpe?g|png|gif)$/)) {
$(".columns").append("<div class = 'column is-4' > <a data-target = 'modal_name'class = 'img-input'> <img id = 'img-card' src='" + folder + val + "'></a></div>");
}
});
Load();
}
});