How to insert insert elements (links) correctly using JS?

Asked Dec 09 '22 at 07:07

Active Dec 09 '22 at 08:32

Viewed 33 times

When I click on the link for the first time - the click event works well. But when I remove (mouseout event) the cursor from the link and then I'll click on the link again, that click event is no longer triggered.

Why? how do I make it work on vanilla JS?

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('qwertty');   
    })
    
    elem.addEventListener('mouseout', function(e) {
       paragraph[count].innerHTML = 'And here the link is no working <a class="link-buy" href="#">link.</a>';
    })
 }

.catalog {
    margin: 200px;
    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">you need to click on the <a class="link-buy" href="#">link</a></p>
</div>

edited Dec 09 '22 at 08:32

asked Dec 09 '22 at 07:07

evans

You remove the event handler when you rewrite the container. Just delegate. Solves it all – mplungjan Dec 09 '22 at 07:17
How to do it right? – evans Dec 09 '22 at 08:28
where should delegation be placed? – evans Dec 09 '22 at 08:33
On the closest, non-dynamic ancestor. – connexo Dec 09 '22 at 08:40
1

It was not trivial to handle the mouseout: https://jsfiddle.net/mplungjan/2dh4avr9/ – mplungjan Dec 09 '22 at 09:30

How to insert insert elements (links) correctly using JS?

0 Answers0