javascript - 对从数据库检索的数据进行分页后，模式窗口将不会打开

Question

我使用 Bootstrap 框架、php、SQL 和 jQuery 构建了一个图像库，用户可以单击缩略图在模式窗口中查看放大的所选图像。所有图像都存储在数据库中。代码按预期工作，直到我对画廊进行分页。现在，当单击缩略图时，模式窗口不会打开。谁能建议解决这个问题？我自己尝试过一些解决方案，但到目前为止没有一个有效。非常感谢。

gallery.php代码:

<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代码:

$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 版本:4.4.1

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

Answer 1

$('.pop').on('click', function() { 仅将处理程序附加到 DOM 中当前的元素。因为您在检索图像之前调用它，所以它确实什么都没有。

您需要使用委托(delegate)事件处理程序。

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