事件侦听器未应用

Question

我正在尝试将单击事件侦听器应用于通过 django 模板生成的按钮。 我的 JavaScript 文件已正确链接，就像我执行标准控制台日志一样，它记录正常，但事件侦听器循环似乎没有做任何事情。

使用 class update-cart 将事件侦听器应用于每个元素的 for 循环

var updateBtns = document.getElementsByClassName('update-cart')


for (var i = 0; i < updateBtns.length; i++){
    updateBtns[i].addEventListener('click', function(){
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'action:', action)
    })
}

具有数据集属性和更新购物车 class 的按钮

<button data-product="{{product.id}}" data-action="add" class="btn btn-primary update-cart">Add To Cart</button>

我的 JavaScript 文件链接在脚本中，该文件包含在 Body 标记末尾之前

{% load static %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="{% static 'js/cart.js' %}"></script>

谢谢你的帮助！

Answer 1

您必须记住，元素的 innerHTML 更新后，内部元素的隐藏属性将被删除。 因此，如果您在 Window LoadEvent 中运行循环会更好。