Я только начинаю изучать работу AJAX запросов и PHP, многого могу не знать, могу что-то упустить.
Есть страница index.php, на ней с помощью AJAX выводится список вакансий в виде карточек, а также пагинация.
Страница index.php
<body>
<section class="mt-3 content">
<div class="container">
<h2>Стажировки</h2>
</div>
<div class="container" id="target-content">
<div class="d-flex justify-content-center">
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
</div>
</div>
<nav class="mt-4" aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<?php
if (!empty($total_pages)) {
for ($i = 1; $i <= $total_pages; $i++) {
if ($i == 1) {
?>
<li class="page-item active" id="<?php echo $i; ?>"><a href="#target" data-id="<?php echo $i; ?>" class="page-link"><?php echo $i; ?></a></li>
<?php
} else {
?>
<li class="page-item" id="<?php echo $i; ?>"><a href="#target" class="page-link" data-id="<?php echo $i; ?>"><?php echo $i; ?></a></li>
<?php
}
}
}
?>
</ul>
</nav>
</section>
</body>
Есть AJAX запрос к странице, откуда выводятся записи:
$(document).ready(function () {
$("#target-content").load("index-handler.php?page=1");
$(".page-link").click(function () {
var id = $(this).attr("data-id");
var select_id = $(this).parent().attr("id");
$.ajax({
url: "index-handler.php",
type: "GET",
data: {
page: id
},
cache: false,
success: function (dataResult) {
$("#target-content").html(dataResult);
$(".page-item").removeClass("active");
$("#" + select_id).addClass("active");
}
});
});
});
Есть страница откуда выводятся записи, index-handler.php:
<?php
include('database.php');
$limit = 20;
if (isset($_GET["page"])) {
$page_number = $_GET["page"];
} else {
$page_number = 1;
};
$initial_page = ($page_number - 1) * $limit;
$sql = "SELECT v.id as vacancy_id, v.name as vacancy_name, v.salary, v.description, emp.city, emp.name as emloyer_name FROM vacancies v LEFT JOIN employers emp ON v.employer_id = emp.id ORDER BY v.id DESC LIMIT $initial_page, $limit";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
?>
<div class="card w-100 mb-2">
<div class="card-body">
<h5 class="card-title"><?php echo $row["vacancy_name"]; ?></h5>
<p class="card-text text-primary"><?php echo $row["salary"]; ?></p>
<p class="card-text"><?php echo $row["description"]; ?></p>
<p class="card-text"><?php echo $row["city"]; ?></p>
<p class="card-text text-muted"><?php echo $row["emloyer_name"]; ?></p>
<a class="btn btn-primary feedback-btn" data-req="<?php echo $row["vacancy_id"];?>">Откликнуться</a>
</div>
</div>
<?php
};
?>
Кнопка в карточке, полученная из index-handler.php имеет класс feedback-btn, я хочу, чтобы при нажатии на кнопки с этим классом срабатывал обработчик событий, который касается только той кнопки, на которую нажали (через новый ajax запрос отправить id карточки и внести его в базу данных). Однако перед тем как отправить запрос, нужно навесить на эти кнопки обработчик событий, чтобы изменить содержимое кнопки на что-то вроде "Загрузка...", и уже после того как отработает ajax запрос, содержимое через success изменится на какое-то по умолчанию.
Я столкнулся с такой проблемой - те карточки с кнопками, которые я получил не обрабатывают клики. Например такой простой код не срабатывает:
var elements = document.querySelectorAll(".feedback-btn");
for (var i = 0; i < elements.length; i++) {
elements[i].onclick = function() {
alert("Клик");
};
}
Его я добавлял в конец главной страницы index.php, однако подобный код вполне корректно работал для кнопок, которые итак статически были прописаны на странице index.php.
Я не понимаю, как сделать обработку событий для этих кнопок в карточках, полученных через ajax.
К примеру: Данные карточки я получил с index-handler.php по ajax, при нажатии на кнопки в них ничего не срабатывает.
Есть и такие кнопки, c тем же классом feedback-btn, они прописаны в самом index.php, но при нажатии на них всё срабатывает