Как получить идентификатор родительского элемента, когда любой дочерний элемент нажимает на вновь созданные элементы

Question

У меня есть список пользователей, которые были созданы с помощью цикла (данные из API). Я пытаюсь вернуть идентификатор родительского элемента при нажатии любого из его дочерних элементов.

Пример: если пользователь нажимает на любой из элементов div (.user-info, .user-name или .user-city), я хочу иметь возможность вернуть идентификатор родительского div.user

Я попытался перебрать все дочерние элементы списка пользователей, но я просто получил пустой объект, потому что элементы были добавлены после загрузки страницы.

Я смотрел на всплывающее окно события, но оно всегда всплывает в списке пользователей. Я не могу заставить его остановиться на .user

Я пробовал что-то вроде этого, но он просто возвращает каждый элемент, а не ID родителя:

const userList = document.querySelector(".user-list");

userList.addEventListener("click", event => {
  if (event.target.classList.contains('user')) {
    console.log(event.target)
  }
});

<div class="user-list">
  <div class="user" id="1">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">josef moore</div>
      <div class="user-email email-wrap">josef.moore@example.com</div>
      <div class="user-city">winchester</div>
    </div>
  </div>
  <div class="user" id="2">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
  <div class="user" id="3">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
</div>

Answer 1

const userList = document.querySelector(".user-list");

userList.addEventListener("click", event => {
    var element = event.target;
    alert(element.closest('.user').id);
});

Метод closest () интерфейса Element возвращает ближайшего предка текущего элемента (или самого текущего элемента).

Примечание: не поддерживается в IE, но доступно заполнение.

См .: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Рабочая демоверсия

Answer 2

Это может считаться «бюджетным» подходом, но вы можете пройти вверх по дереву элементов, пока не найдете user и проверить его id:

document.getElementsByClassName("user-list").item(0).addEventListener("click",function(event){
  var target=event.target;
  var classes;
  while(!(classes=target.classList).contains("user-list")){
    if(classes.contains("user")){
      console.log(target.id);
    }
    target=target.parentElement;
  }
});

<div class="user-list">
  <div class="user" id="1">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">josef moore</div>
      <div class="user-email email-wrap">josef.moore@example.com</div>
      <div class="user-city">winchester</div>
    </div>
  </div>
  <div class="user" id="2">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
  <div class="user" id="3">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
</div>

Answer 3

Если вы используете Jquery, это код

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $('.user-info, .user-name, .user-city').click(function() {
            var div_id = $(this).closest('.user').attr('id');
            console.log(div_id);
        });
    });
</script>

Answer 4

Как-то так?

const userList = document.querySelector(".user-list");

function findParent(element) {
    const parent = element.parentNode;
    if (parent.classList.contains('user')) {
        console.log(parent.id);
    } else if (parent) {
       findParent(parent);
    }
}

userList.addEventListener("click", event => {
    findParent(event.target);
});

Рабочая демоверсия