Javascript-Click事件不适用于动态添加的元素

Question

How can I run an event on dynamically added elements, because my click event doesn't work on new elements.

I found some answer in here but all about jQuery so I'm coding with vanilla javascript. So do you have any advice ?

  document.querySelectorAll('.galeri-cart').forEach(function (cart) {
      cart.addEventListener('click', function () {
       // something awesome happening in here    
    })
  });

creating element codes;

success: function () {
let imageData = JSON.parse(this.files[i].xhr.response);
let img = document.createElement('img');
 img.setAttribute('src', imageData.url);
 img.setAttribute('data-id',imageData.id);
 img.setAttribute('alt', imageData.alt);
 let subDiv = document.createElement('div');
 subDiv.className = "galeri-cart";
 subDiv.appendChild(img);
 let midDiv = document.createElement('div');
 midDiv.className = "col-md-4";
 midDiv.appendChild(subDiv);
 let div = document.querySelector('.row');
 div.insertBefore(midDiv, div.childNodes[0]);
 i++
}

Answer 1

Since you are adding the elements to the DOM manually, you can simply attach the event listener after you create the element and before you append it to the DOM, like so:

function galeriClickHandler () {
  // something awesome happening in here
}

success: function () {
let imageData = JSON.parse(this.files[i].xhr.response);
let img = document.createElement('img');
 img.setAttribute('src', imageData.url);
 img.setAttribute('data-id',imageData.id);
 img.setAttribute('alt', imageData.alt);
 let subDiv = document.createElement('div');
 subDiv.className = "galeri-cart";
 // add event listener here
 subDiv.addEventListener('click', galeriClickHandler);
 subDiv.appendChild(img);
 let midDiv = document.createElement('div');
 midDiv.className = "col-md-4";
 midDiv.appendChild(subDiv);
 let div = document.querySelector('.row');
 div.insertBefore(midDiv, div.childNodes[0]);
 i++
}

Alternatively, you can use event delegation on the static parent element and listen for clicks on specific children, like so:

function galeriClickHandler () {
  // something awesome happening in here
}

// Get the parent DIV, add click listener...
document.querySelector(".row").addEventListener("click",function(e) {
    // e.target was the clicked element
  if (e.target && e.target.matches(".galeri-cart")) {
    galeriClickHandler();
  }
});

Answer 2

Since you didn't give any info on how you're adding the elements, the only direct code solution to give would be one that delegates the event handling to some container element.

 var par = document.querySelector("#parent"); var button = document.querySelector("button"); button.addEventListener("click", function() { par.insertAdjacentHTML("beforeend", `<p class=galeri-cart>cart ${getCarts().length+1}</p>`) }); par.addEventListener('click', function(event) { var cart = event.target.closest(".galeri-cart") if (cart) cart.textContent += " clicked!" }); function getCarts() { return par.querySelectorAll(".galeri-cart"); } 

 <button>Add Cart</button> <div id=parent> <p class=galeri-cart>cart 1</p> <p class=galeri-cart>cart 2</p> <p class=galeri-cart>cart 3</p> </div> 

---

You added your code. You're already adding attributes and properties to the element, so you just do what you're already doing... bind the handler.

Here's a rewrite that makes your code much more concise and readable.

First, create the event handler.

function clickHandler() {
   // your handler code
}

Then create the element and bind the handler to it.

success: function() {
  let imageData = JSON.parse(this.files[i].xhr.response);
  let div = document.querySelector('.row');

  div.insertAdjacentHTML("afterbegin", `
<div class="col-md-4">
  <div class="galeri=cart">
    <img src="${imageData.url}" data-id="${imageData.id}" alt="${imageData.alt}">
  </div>
</div>`);

  div.firstElementChild
     .firstElementChild
     .addEventListener("click", clickHandler);

  i++;
}