0

Started to use addEventListener some weeks ago. It is one case i cant understand so far. We are talking about cases where we printing taggs with templet literals and declaring the class inside thos taggs. After that if we going to use thise classes for other EventListener, somethimes we need to have other EventListener inside the first one(the one who is printing/declaring classes) other times we dont have to have another eventListener inside the first one. Why? Somebody have good explanation or can point me in right direction?

I am giving exemples under.

Thank you in advance

//two different Event Listener were the first one making class and second one using that class

const drink = document.querySelector(".drink");
let drinkTxt = "";
MenyModule.getDrink().forEach(drink =>{
  drinkTxt +=`
  <div class="boks">
    <h4>${drink.name}</h4>
    <p class="des">${drink.des}</p>
    <p class="price">kr ${drink.price}</p>
    <a class="button-buy">BUY</a>
  </div>
  `
});
drink.innerHTML = drinkTxt;


document.querySelectorAll(".boks").forEach(boks =>{
  boks.addEventListener("click", (e)=>{
      alert();
    })
  });


//Second exemple where i need to have other EventListener inside the first one or alert() will not be executed

document.querySelectorAll(".button-buy").forEach(button =>{
  button.addEventListener("click", ()=>{
 
      valgteRetterTxt+=`<a class="remove1">REMOVE</a>`
      valgteRetter.innerHTML=valgteRetterTxt;

        document.querySelectorAll(".remove1").forEach(remove=>{
          remove.addEventListener("click", ()=>{
            alert();
          });
        });

    });
  });
V P
  • 15
  • 6
  • Do you have multiple `.remove1` elements? This will add additional event listeners to all the ones other than the one you just added. – Barmar Mar 29 '21 at 23:30
  • Also, clicking on these links will reload the page after the alert. – Barmar Mar 29 '21 at 23:31
  • You need to do it inside the event listener because the element doesn't exist before the user clicks on the button. – Barmar Mar 29 '21 at 23:31
  • See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for how you can define the event listener just once instead of every time you click. – Barmar Mar 29 '21 at 23:32
  • thank you for reply. In some cases i have multiple .remove1 elements. I have tryed with querySelector() for those times it is only one element, and it is still the same. Just to clarify, i am not clicking the remove eventListener before button EventListener is clicked. So the element allready exist when i execute the remove eventlistener..?? or not? – V P Mar 29 '21 at 23:41
  • If you use `querySelector()` it will select the first one in the DOM, not the one you just added. – Barmar Mar 29 '21 at 23:42
  • You could use `valgteRetter.querySelector(".remove1")` to get the one you just added. – Barmar Mar 29 '21 at 23:43
  • But it would be simpler to just use event delegation once, as explained in the linked question. – Barmar Mar 29 '21 at 23:43

0 Answers0