我使用 Bootstrap 框架、php、SQL 和 jQuery 構(gòu)建了一個(gè)圖片庫(kù),用戶(hù)可以在其中單擊縮略圖以在模式窗口內(nèi)查看他們選擇的圖片放大。所有圖像都存儲(chǔ)在數(shù)據(jù)庫(kù)中。代碼按預(yù)期工作,直到我對(duì)畫(huà)廊進(jìn)行分頁(yè)。現(xiàn)在,當(dāng)單擊縮略圖時(shí),模式窗口不會(huì)打開(kāi)。任何人都可以建議解決此問(wèn)題嗎?我自己嘗試了一些解決方案,但到目前為止都沒(méi)有奏效。非常感謝。畫(huà)廊.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">×</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
對(duì)從數(shù)據(jù)庫(kù)中檢索到的數(shù)據(jù)進(jìn)行分頁(yè)后,模式窗口不會(huì)打開(kāi)
翻翻過(guò)去那場(chǎng)雪
2022-10-14 16:11:28