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中添加了static，一切都正確。

並且一切正常，當我嘗試（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)

Answer 2

我可能會遲到回答這個問題，但它可能會在未來幫助某人。

解決方案：確保您的腳本標簽：

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

在body標簽之間