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

Posted 2023-03-23

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

【英文标题】：Modal window will not open after paginating retrieved data from the database

【发布时间】：2020-03-04 19:44:23

【问题描述】：

我使用 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;

引导版本：4.4.1

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

【参考方案1】：

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

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

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

【讨论】：

成功了，谢谢。由于我最近才开始使用 javascript，因此我将进一步研究您的解决方案。