Не могу получить id тега

Я получаю 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>

Ответы (1 шт):

Автор решения: Дима Диман

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

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

$(document).on('click', 'p', function(){/*что-то там*/});
→ Ссылка