Question

如何在动态添加的元素上运行事件，因为我的点击事件不适用于新元素。

我在这里找到了一些答案，但所有关于hello, i think you are not intelligent, you are actually d--- and s-----.的答案都是如此，所以我使用vanilla javascript进行编码。你有什么建议吗？

jQuery

创建元素代码;

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

Answer 1

由于您是手动将元素添加到DOM，因此您可以在创建元素之后以及在将其附加到DOM之前附加事件侦听器，如下所示：

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++
}

或者，您可以在静态父元素上使用event delegation并监听特定子元素的点击次数，如下所示：

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

由于您没有提供有关如何添加元素的任何信息，因此唯一的直接代码解决方案是将事件处理委托给某个容器元素。

＆＃13;

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");
}

＆＃13;

<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>

＆＃13;

您添加了代码。您已经在元素中添加了属性和属性，因此您只需执行您正在执行的操作...绑定处理程序。

这是一个重写，使您的代码更简洁，更易读。

首先，创建事件处理程序。

function clickHandler() {
   // your handler code
}

然后创建元素并将处理程序绑定到它。

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++;
}

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

2 个答案: