Как правильно вставлять вставлять элементы (ссылки) с помощью JS?

Question

Требуется добавить текст со ссылкой в определенный элемент, но после вставки она становится нерабочей, т.е. JS код не срабатывает (лог не выводится больше одного раза.)

Как правильно вставить ссылку, чтобы JS код всегда срабатывал и в логе всегда выводилось 123 при нажатии на ссылку?

const elCollection = document.getElementsByClassName('wrapper');
const paragraph = document.getElementsByClassName('catalog');

for(var i = 0; i < elCollection.length; i++) {
    var elem = elCollection[i];
    const count = i;
    
    paragraph[count].querySelector('.link-buy').addEventListener('click', function() {
        console.log('123');
        paragraph[count].innerHTML = 'Нужно нажать на не рабочую <a class="link-buy" href="#">ссылку</a>';
    })
    
 }

.catalog {
    margin: 0;
    padding: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-bottom: 15px;
    color: #000;
  }
  
  .link-buy {
    color: #1996d7;
    text-decoration: none;
    border-bottom: 1px dashed;
  }
  
  .link-buy:hover {
    color: #22A7E9;
  }

<div class="wrapper">
   <p class="catalog">Нужно нажать на <a class="link-buy" href="#">ссылку</a></p>
</div>

Answer 1

Можно, например, воспользоваться делегированием...

const elCollection = document.getElementsByClassName('wrapper');
const paragraph = document.getElementsByClassName('catalog');

for(var i = 0; i < elCollection.length; i++) {
    var elem = elCollection[i];
    const count = i;
    console.log(paragraph[count].textContent)
    paragraph[count].addEventListener('click', function(e) {
        if (e.target.tagName != 'A') return
        console.log('123');
        paragraph[count].innerHTML = 'Нужно нажать на не рабочую <a class="link-buy" href="#">ссылку</a>';
    })
    
 }

БЛОГ НА HUSL

Как правильно вставлять вставлять элементы (ссылки) с помощью JS?

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