JavaScript 的点击事件在 Django 中不起作用

Question

这是 static/js 文件夹中 (cart.js) 的代码

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

for (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)
        
    })
}

并在底部的 HTML 文件中：

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

并调用main.html

中的js

<script type="text/javascript" src="{% static 'js/cart.js' %}"> </script>

然后我在 setting.py 中添加了静态，一切都正确了。

一切正常，当我尝试 (console.log) 没有按钮点击事件时... 问题只出在按钮事件上，因为它不起作用

Answer 1

您的问题与 Django 无关。看来您没有正确使用 JavaScript。当浏览器执行来自 card.js 的代码时，尚未构建 HTML DOM 树。要附加 JS 事件，您需要将 cart.js 代码更改为：

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

    for (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)
        })
    }
}

document.addEventListener('DOMContentLoaded', initUpdateBtns)

JavaScript 的点击事件在 Django 中不起作用

on click event with JavaScript doesn't work in Django

javascript

django

onclick