0

не могу понять как правильно получать 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>
        `
    });
3
  • Попробуйте добавить к отслеживанию события click также touchend. На чистом JS несколько событий можно добавить как показано здесь.
    – XelaNimed
    26 янв в 8:59
  • Попробовал, все равно та же проблема. Особенно с первым div. Что бы получить его id нужно сначала получить id со второго или третьего div а уж потом только кликнуть на первый. По другому с первого div id не получается получить. Запутанно но надеюсь понятно обяснил. 26 янв в 9:17
  • Нет, не понятно. Опубликуйте код, который отражает Вашу проблему. Разберитесь с чем конкретно у Вас проблема: с получением id элемента по клику/touch на нём, с логикой приложения, с обработчиками событий... В идеале создайте пример используемого кода воспользуясь для этого элементом "Фрагмент кода" (Ctrl + M) в редакторе.
    – XelaNimed
    26 янв в 9:57

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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