Modal window will not open after paginating retrieved data from the database

I have built an image gallery using the Bootstrap framework, php, SQL and jQuery where users can click a thumbnail to see their selected image enlarged inside a modal window. All the images are stored in a database. The code worked as expected until I paginated the gallery. Now, when a thumbnail is clicked, the modal window does not open. Can anyone suggest a fix for this problem? I have tried some solutions myself but none have worked so far. Many thanks.

gallery.php code:

<div class='row' id='pagination_data'>

    <!--Fetch and display images from database -->          
    <?php ?>

</div>   

<!--Bootstrap modal window -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">              
  <div class="modal-body">
    <button type="button" class="close" data-dismiss="modal"><span aria-  hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <img src="" class="imagepreview" style="width: 100%;" >
  </div>
</div>
</div>
</div>

<script>
//PAGINATION SCRIPT 
$(document).ready(function(){

    //when fucntion is called fetch data from gallery table
    load_data();

    function load_data(page) {
         $.ajax({
            url:"pagination.php",
            method: "POST",
            data:{page:page},
            success:function(data){

                $('#pagination_data').html(data);

            }
        })
    }

    $(document).on('click', '.pagination_link', function()  {

        var page = $(this).attr("id");
        load_data(page);

    });

});

</script>

<script>
//MODAL SCRIPT
$(function() {
    $('.pop').on('click', function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('#imagemodal').modal('show');   
    });     
});

</script>

pagination.php code:

$record_per_page = 18;
$page = ''; //store current page number
$output = '';

//check if page variable is present 
if (isset($_POST["page"]))  {

//ajax function
$page = $_POST["page"];

} else {

$page = 1;

}

$start_from = ($page - 1) * $record_per_page;

$query = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $record_per_page";

$result = mysqli_query($conn, $query);

while ($row = mysqli_fetch_array($result)) {

$img = $row["path"];
$uploadDate = $row["uploadDate"];

$img = "<img id='modalImg' src='useruploads/" . $row['path'] . "' style='max-width: 100%; height: auto;'/>";

$output .= "

    <div class='col-md-4 mainGalleryImg'>
            <div class='myImg'>
            <div class='pop'>
            $img
            </div>
            <br>
            </div>
            </div> 

    ";
}

$output .= "<div class='col-md-12' align='center'> <nav aria-label='Page navigation example'>
            <ul class='pagination justify-content-center'> <li class='page-item'>
                    <a class='page-link' href='#' aria-label='Previous'>
                    <span aria-hidden='true'>&laquo;</span>
                    <span class='sr-only'>Previous</span>
                    </a>
                </li>";  
$page_query = "SELECT * FROM gallery ORDER BY id DESC";
$page_result = mysqli_query($conn, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);

for ($i=1; $i <=$total_pages; $i++)  {

    $output .="<span class='pagination_link page-link' style='cursor:pointer;' id='".$i."'>".$i."</span>"; 

}

$output .= " <li class='page-item'>
                    <a class='page-link' href='#' aria-label='Next'>
                    <span aria-hidden='true'>&raquo;</span>
                    <span class='sr-only'>Next</span>
                    </a>
                </li></ul>
        </nav> </div>";

echo $output;

Bootstrap version: 4.4.1

jQuery version: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Answer

$('.pop').on('click', function() { only attaches the handler to elements currently in DOM. Since you call it before you even retrieved the images it does nothing.

You need to use delegated event handlers.

 $(document).on('click', '.pop', function() {

Advertisement

Answer