我有一个购物车应用程序的多个按钮(由
PHP生成)：
<button class="addtocart" id="<?PHP echo $code; ?>">
<span id="addtocartbutton">Add to cart</span>
</button>
我想使用功能更新我的购物车：
function AddtoCart() {
alert("Added!");
}
后来,我想找到由调用它的按钮创建的id($code)(不知道该怎么做,但也许这是另一个问题).所以我尝试了这个：
document.getElementsByClassName("addtocart").addEventListener("click",AddtoCart());
但它不起作用.它使用onclick工作,但我理解通过创建EventListener来实现它的正确方法.另外,我不能在jQuery中使用on()函数,因为我被迫使用没有它的jQuery Version 1.6.
我看过https://stackoverflow.com/a/25387857/989468并且我无法将它真正地分配给作为p标签的父节点,因为我显然不希望为p标签中的其他元素分配此函数.
解决方法
虽然给出的答案是正确的,但还有另一种方法：
Event Delegation
将侦听器附加到SINGLE事物,在这种情况下是文档正文,然后检查以查看实际单击的元素：
警告：即时输入：未经测试
// Only needed *once* and items may be added or removed on the fly without
// having to add/remove event listeners.
document.body.addEventListener("click",addtoCart);
function addtoCart(event) {
var target = event.target;
while(target) {
if (target.classList.contains('addtocart')) {
break;
}
// Note: May want parentElement here instead.
target = target.parentNode;
}
if (!target) {
return;
}
var id = target.dataset.id;
alert(id + " added!");
}