@ozerovlife

Почему не срабатывает слушатель событий?

Два файла. Один содержит слушатели, другой ajax запрос. Если подключены оба: ajax - первый подключенный - срабатывает ajax, но не срабатывает открытие попап из другого файла, и наоборот, первый это модалка - не срабатывает ajax. Пробовал слушатели вставлять в файл с аджаксом, тоже самое. Пробовал слушатели поместить внутрь if(response.ok) - то же не работает.
<div class="popup_notice popup_hidden">

    <div class="popup__wrap">
        <div class="popup__main">
            <div class="popup_notice__img flex_bas">
                <img src="./assets/img/10.png" alt="">
            </div>
            <div class="popup_notice__info flex_bas">
                <h2 class="popup_notice__info_title">Title - Все вставки текста ниже это текст рыба</h2>
                <p class="popup_notice__info_disc">Lorem ipsum dolor sit amet, consectetur adipisicing</p>
                <p class="popup_notice__info_date">Дата: data</p>
                <p class="popup_notice__info_time">Час: time</p>
            </div>
        </div>
        <div class="popup__close">
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<script src="assets/js/listeners.js"></script>
<script src="assets/js/ajax_popup.js"></script>

//Ajax_popup.js
function get_id(event){
    const target = event.target.getAttribute('data-identity');
    return target;
}

async function send_request(event){
    let id = get_id(event);

    let response = await fetch('./get_info_popup.php', {
        method: 'post',
        body: JSON.stringify({id: id}),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    });

    if (response.ok) { // если HTTP-статус в диапазоне 200-299
        let json = await response.json();
        let json_event = json[0];

        document.querySelector('.popup_notice__img img').src = json_event.img;
        document.querySelector('.popup_notice__info_title').innerHTML = json_event.title;
        document.querySelector('.popup_notice__info_disc').innerHTML = json_event.disc;
        document.querySelector('.popup_notice__info_date').innerHTML = json_event.date;
        document.querySelector('.popup_notice__info_time').innerHTML = json_event.time;
    } else {
        alert("Ошибка HTTP: " + response.status);
    }

}
document.querySelector('.notification').onclick = e => {
    send_request(e);
}


// Listener.js


function hide_popup(){
    document.querySelector('.popup_notice').classList.toggle('popup_hidden');
    console.log('Hide!')
}
document.querySelector('.event__button span').onclick = hide_popup;
document.querySelector('.popup__close').onclick = hide_popup;
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
<script src="assets/js/listeners.js" defer></script>
<script src="assets/js/ajax_popup.js" defer></script>


Сори, обманул вас. Просто для установки слушателей используйте addEventListener, но и параметр defer у скриптов оставьте, лишним не будет)

document.querySelector('.notification').addEventListener("click", e => {
    send_request(e);
}, false);

document.querySelector('.event__button span').addEventListener("click", hide_popup, false);
document.querySelector('.popup__close').addEventListener("click", hide_popup, false);


ну и обратите внимание, что в представленном html коде нет следующих элементов, на которые вы пытаетесь повесить обработчики:
- элемента span с классом .event__button
- элемента с классом .notification
Возможно они у вас остались гдето за рамками представленного html кода.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект
26 янв. 2021, в 23:07
1000 руб./за проект