Я работаю над бесконечной прокруткой с помощью PHP и AJAX. В этом я загружаю 4 изображения по умолчанию из index.php и после достижения конца страницы я снова извлекаю новые 4 изображения из data.php в index.php через вызов AJAX. Все изображение при нажатии откроет модальное изображение с этим изображением, вместо того, чтобы открывать это изображение в новой вкладке или в той же вкладке с URL-адресом изображения. Я использую некоторые JS и JQuery плагин, который я скачал из Интернета. Проблема, с которой я сталкиваюсь, состоит в том, что первые 4 изображения, которые загружаются на самой странице index.php, работают нормально с открытием в модальном режиме, но новые изображения, которые я извлекаю из data.php после достижения конца страницы, не работает с открытием в модале, это открытие в самой вкладке (как обычно). Проблема здесь в том, что функции Javascript и JQuery, написанные в файле, который добавляется из внешнего файла, работают только с изображениями из index.php, а не с недавно загруженными изображениями из AJAX. Как я могу решить эту проблему, чтобы каждый раз, когда я вызывал новые данные через AJAX, реализовывались функции JavaScript и JQuery для новых данных, загружаемых с другой страницы. Я добавляю свой код index.php и data.php ниже, я не могу добавить код из двух файлов js в разделе body stackoverflow, поскольку код слишком длинный. Извините, но я новичок в этом.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Infinite Scroll</title>
<!-- Main Styles CSS -->
<link rel="stylesheet" type="text/css" href="common_assests/css/main.min.css">
<!------slider css----------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.inner{
margin-bottom: 2%;
background-color: #ccc;
border:1px solid #ccc;
padding: 6%;
}
.load-more{
background-color: rgba(0,0,0,0.28);
width: 100%;
position: absolute;
height: 670px;
}
svg {
height: 64px;
margin-left: 10%;
/* position: absolute;*/
margin-top: 50%;
transform: translate(-50%,-50%);
width: 64px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 data">
<?php
for ($x = 0; $x <= 3; $x++)
{
?>
<div class="inner">
<ul class="widget js-zoom-gallery">
<li>
<a href="image.jpg">
<img src="image.jpg" class="" alt="photo" style="height: 100%;width: 100%;object-fit: cover;"></a>
</li>
</ul>
</div>
<?php
}
?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var start=4;
var limit=1;
$(document).ready(function(){
//getdata();
$(window).scroll(function(){
// working in ie browser
if($(window).scrollTop() + $(window).height() == $(document).height()){
getdata();
}
});
});
function getdata(){
$.ajax({
url:"data.php",
method:"get",
dataType:"text",
data:{
start1:start,
limit1:limit
},
success:function(result){
$(".data").append(result);
start+=limit;
//alert(start);
}
});
}
</script>
<script src="common_assests/js/jquery-3.2.1.js"></script>
<script src="common_assests/js/jquery.magnific-popup.js"></script>
<script src="common_assests/js/base-init.js"></script>
</body>
</html>
data.php
<?php
for ($x = 0; $x <= 3; $x++)
{
?>
<div class="inner">
<ul class="widget js-zoom-gallery">
<li>
<a href="image.jpg">
<img src="image.jpg" class="" alt="photo" style="height: 100%;width: 100%;object-fit: cover;"></a>
</li>
</ul>
</div>
<?php
}
?>