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

Question

我使用 Bootstrap 框架、php、SQL 和 jQuery 构建了一个图片库，用户可以在其中单击缩略图以在模式窗口内查看他们选择的图片放大。所有图像都存储在数据库中。代码按预期工作，直到我对画廊进行分页。现在，当单击缩略图时，模式窗口不会打开。任何人都可以建议解决此问题吗？我自己尝试了一些解决方案，但到目前为止都没有奏效。非常感谢。画廊.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;}jQuery 版本：https ://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Answer 1

$('.pop').on('click', function() {仅将处理程序附加到当前在 DOM 中的元素。由于您在检索图像之前调用它，因此它什么也不做。

您需要使用委托的事件处理程序。

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