Here's a dilemma I'm facing: On my webpage, I have implemented two different click events. The first one opens a modal displaying a larger image when you click on a thumbnail picture (similar to Instagram on PC - I created an Instagram clone for practice). The second button is used to load more images.
The issue arises because I am using AJAX for both clicks to retrieve certain variables and pass them to PHP. Initially, the page only shows 3 images, but when I click on a thumbnail, the correct image is displayed in the modal. However, after clicking "show more" to display 3 additional images, the modal gets stuck. Regardless of which thumbnail I click on afterwards, only one picture is shown, indicating that the AJAX request isn't being triggered again. I hope this description clarifies the problem, and I would greatly appreciate any assistance. (Apologies for any language errors).
Below is the corresponding code:
Here is the function for the AJAX call:
function ajaxShow(urls,datas,element){
$.ajax({
url: urls,
data: {datas: datas},
cache:true,
}).always(function(result){
console.log("done");
element.html(result);
});
}
And here are the click event functions:
$(document).ready(function(){
//Open picture in modal
var pic = $(".pics");
var modalCont = $(".modal-content");
pic.on('click',function(event){
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
//Load more
var smbt = $(".smbt");
var limit = $(smbt).data('loaded');
smbt.on('click',function(event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});
});
To summarize: After clicking on "load more," the modal does not open, and the AJAX request fails to run again.