javascript - HTML 按钮无响应，控制台未注册事件

Question

正在开发一个简单的待办事项应用程序，但删除按钮有问题。当我单击时，浏览器控制台甚至没有注册事件。超级困惑在这里做什么。我已经浏览了 index.html 中的所有代码以及 app.py 代码，我无法弄清楚为什么它甚至没有在浏览器中注册发生的事情，即使它没有导致我想要的它要做。基本上只是不确定如何调试我猜甚至没有注册为现有的东西？

我假设这是 HTML 中的问题，但以防万一，我也包括了相关的 python 代码。

谢谢！

索引.html

<ul id="todos">
            {% for d in data %}
            <li><input class="check-completed" data-id="{{ d.id }}" 
                type="checkbox" {% if d.completed %} checked {% endif %}> {{ d.description }}
                <button class="li button deletebutton" data-id="{{ d.id }}">&cross;</button>  <!-- &cross; is HTML for an X-->
            </li>
            {% endfor %}
        </ul>

index.html 中的脚本：

const deletebtns = document.querySelectorAll('.deletebutton');
            
            for (let i = 0; i < deletebtns.length; i++) {
                const deletebutton = deletebtns[i];
                deletebutton.onclick = function(e) {
                    const todoId = e.target.dataset['id'];
                    fetch('/todos/' + todoId, {
                        method: 'DELETE',
                        })
                    }
                   
                }
            }

应用程序.py：

@app.route('/todos/<todo_id>', methods=['DELETE'])
def delete_todo(todo_id):
    try:
        Todo.query.filter_by(id=todo_id).delete()
        db.session.delete(todo)
        db.session.commit()
    except:
        db.session.rollback()
    finally:
        db.session.close()
    return redirect(url_for('index'))

标签： javascriptpythonhtml