Как получать id div по клику на него

Question

не могу понять как правильно получать id div по клику на него. Написал вот такой вот код, вроде все работает хорошо, но когда заходишь на сайт с мобильного телефона. То id получается некоректно. Например нажимаешь на блок нечего не получил и так раза 3, потому получаю id, потом опять такая же ситуация. То есть click на мобильном устройстве не срабатывает с первого раза.

Эта система нужна когда пользователь нажимает на div менялась ссылка в попапе.

Есть ли еще какие то способы получать id div по клику ?

Буду рад вашей помощи.

<div id="buttonBlock">
<span id="lin1">1</span>
<span id="lin2">2</span>

<div id="testinnerhtml"></div>
</div>

      document.getElementById('buttonBlock').addEventListener('click', function(e){
      var id = e.target.id;
      document.getElementById('testinnerhtml').innerHTML = `
          <a href="<?php echo cl_link('link/${id}'); ?>" class="a-m-btn" data-spa="true">test link id
</a>
        `
    });

Answer 1

Код рабочий. Тот адресс в ссылке что вы туда пихаете через php вызов работать не бутет. JS - отрадатываеться в браузере клиента, php - компилируеться на сервере.

 document.getElementById('buttonBlock').addEventListener('click', function(e) {
   let id = e.target.id;
   createElement(id);
 });

 function createElement(id) {
   document.getElementById('testinnerhtml').innerHTML = `<a href="link/${id}" class="a-m-btn" data-spa="true">test link id${id}</a>`
 }

#buttonBlock {
  height: 50px;
  border: 1px solid #000;
}

span {
  display: inline-block;
  text-align: center;
  width: 50px;
  height: 50px;
  margin: 0 20px;
  border: 1px solid #f00;
}

.a-m-btn {
  width: 100px;
  height: 50px;
  display: inline-block;
  background-color: pink;
}

<div id="buttonBlock">
  <span id="lin1">1</span>
  <span id="lin2">2</span>

  <div id="testinnerhtml"></div>
</div>

БЛОГ НА HUSL

Как получать id div по клику на него

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