0

Я получаю Id тега любого без проблем, но когда с помощью итерации создаю теги в данном случае

из API, то при клике на данный тег ничего не происходит, хотя стили и все остальное работает. вот пример:

<div id="names></div>
<script>
let apiUrl = "https://json.medrating.org/users/";
fetch(apiUrl).then(response => {

    return response.json();
}).then(data => {
    let main = '';
    data.map(d => d.name !== undefined ?  main += `<p id=${d.id}>`+ d.name + '</p>' : null);
    document.getElementById("names").innerHTML = main;
}).catch(err => {
    // Do something for an error here
});

$('p').click(function (event) {
    console.log(event.target.id)
})


</script>
0

1 ответ 1

2

Проблема в том, что контент добавляется после того, как вы подписались на событие клика. Фиксится просто - с помощью делегирования событий. То есть ловишь событие не в элементе (в данном случае p), а в контейнере, который точно есть в DOM на момент подписки на событие.

Применительно к jquery есть небольшой сахар - достаточно написать так:

$(document).on('click', 'p', function(){/*что-то там*/});
2
  • Спасибо, понял в чем суть) Просто все время работал на React(е), привык к нему.
    – Konstantin
    Commented 30 мая 2020 в 11:45
  • Если ответ подошел, то закрывайте вопрос, чтобы другие, кто хочет ответить на неотвеченные вопросы, не просматривали этот вопрос) Commented 1 июн. 2020 в 20:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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