Javascript 将从数据库检索到的数据分页后,模式窗口将不会打开
我使用引导框架、php、SQL和jQuery构建了一个图像库,用户可以在其中单击缩略图,在模式窗口中查看放大的选定图像。所有图像都存储在数据库中。代码按预期工作,直到我为库分页。现在,单击缩略图时,模式窗口不会打开。有人能建议解决这个问题吗?我自己也尝试过一些解决方案,但到目前为止都没有奏效。非常感谢 gallery.php代码:Javascript 将从数据库检索到的数据分页后,模式窗口将不会打开,javascript,php,jquery,html,sql,Javascript,Php,Jquery,Html,Sql,我使用引导框架、php、SQL和jQuery构建了一个图像库,用户可以在其中单击缩略图,在模式窗口中查看放大的选定图像。所有图像都存储在数据库中。代码按预期工作,直到我为库分页。现在,单击缩略图时,模式窗口不会打开。有人能建议解决这个问题吗?我自己也尝试过一些解决方案,但到目前为止都没有奏效。非常感谢 gallery.php代码: <div class='row' id='pagination_data'> <!--Fetch and display images f
<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;
}
$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'>«</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'>»</span>
<span class='sr-only'>Next</span>
</a>
</li></ul>
</nav> </div>";
echo $output;
引导版本:4.4.1
jQuery版本:$'.pop'。单击时,函数{只将处理程序附加到DOM中当前的元素。因为您在检索图像之前调用它,所以它什么也不做
您需要使用委托事件处理程序
$(document).on('click', '.pop', function() {
这很有效,谢谢。我将进一步研究您的解决方案,因为我最近才开始使用javascript。