0

Я только начинаю изучать работу 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, но при нажатии на них всё срабатывает

введите сюда описание изображения

1

1 ответ 1

0

Пока я двигаюсь в сторону делегирования. Добавил на страницу index.php такой код:

const box = document.querySelector("#target-content");
box.addEventListener("click", function(e){
  let targetItem = e.target;
  if (targetItem.closest(".feedback-btn")){
    targetItem.innerHTML = "Нажата!"
  }
})

Обратился к блоку, в который грузятся карточки и впрочем могу так что-то обрабатывать.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.