AddEventListener不工作在动态DOM

Question

我有以下函数动态创建一个Bootstrap卡:

var createProductCard = function(productId, productName, cost, unit, description, src) {
var card = document.createElement('DIV');
card.classList.add('card');
var img = document.createElement('IMG');
img.classList.add('card-img-top');
img.classList.add('w-100');
img.classList.add('d-block');
img.setAttribute('alt', productName + ' image unavaible');
img.setAttribute('src', src);
var cardBody = document.createElement('DIV');
cardBody.classList.add('card-body');
var cardTitle = document.createElement('H4');
cardTitle.classList.add('card-title')
cardTitle.innerText = productName;
var cardSubtitle = document.createElement('H6');
cardSubtitle.classList.add('card-subtitle')
cardSubtitle.classList.add('mb-2')
cardSubtitle.classList.add('text-muted')
cardSubtitle.innerText = cost + ' - ' + unit;
var cardText = document.createElement('P');
cardText.classList.add('card-text');
cardText.innerText = description;
var button = document.createElement('BUTTON');
button.classList.add('btn');
button.classList.add('btn-primary');
button.classList.add('add-card');
button.setAttribute('data-id', productId);
button.innerText = 'Add to Cart';
button.addEventListener('click', addToCartClick, false);
cardBody.appendChild(cardTitle);
cardBody.appendChild(cardSubtitle);
cardBody.appendChild(button);
if (src) {
card.appendChild(img);
}
card.appendChild(cardBody);
return card;
}

在声明按钮的地方，我试图使用addEventListener来生成按钮的单击事件。addToCart函数定义为:

var addToCartClick = function() {
var id = this.getAttribute('data-id');
var card = products.find(function(product) {
return product.ProductId === id;
});
cart.push(card);
}

对于它的价值，这是我如何使我的AJAX调用来获取数据:

window.onload = function() {
var productsAll = document.getElementById('products-all');
var xhttp = new XMLHttpRequest();
xhttp.open('GET', '/server/api/product/query.php/', true);
xhttp.setRequestHeader('Content-type', 'application/json');
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText; 
var products = JSON.parse(response);
if (!products.records) {
return;
}
products = products.records;
for (const key in products) {
if (Object.hasOwnProperty.call(products, key)) {
const product = products[key];
var card = createProductCard(product.ProductId, product.ProductName, product.Cost, product.UnitName, product.Description, null);
productsAll.innerHTML += card.outerHTML;
}
}
}
};
xhttp.send();
}

问题是，当我实际单击按钮时，click事件从未被调用。我尝试添加debugger，设置断点，并在函数中调用console.log('click');，但当我单击按钮时，代码从未达到任何这些尝试。

我也试过用onclick代替click，但没有成功。

在这一点上，我不确定我做错了什么。

Answer 1

试试这个:

button.setAttribute('onclick', 'yourFunction()');

Answer 2

我找到了自己问题的答案。

解决方案是在将我的卡添加到父卡时使用appendChild方法。这里的文档:https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

这是改变(在我的线程的最后一个代码块):

const product = products[key];
var card = createProductCard(product.ProductId, product.ProductName, product.Cost, product.UnitName, product.Description, null);
// productsAll.innerHTML += card.outerHTML;
productsAll.appendChild(card.outerHTML);