Django模板中event.preventDefault()报错及data-index获取异常问题

问题原因分析 #

1. event.preventDefault()报错：$(document).ready()的回调参数并非DOM事件对象，该方法仅用于阻止点击、表单提交这类事件的默认行为，ready事件没有需要阻止的默认行为，因此调用会触发类型错误。
2. tablid为undefined：在document.ready回调中，$(this)指向的是document对象，而非目标<div>，自然无法获取data-index属性值。

修正后的代码实现 #

直接利用Django模板变量获取商品ID，移除无效的事件阻止和错误的this引用：

{% if table.is_active %}
    <div data-index="{{ table.id }}" class="table table-item">
        <a href="{% url 'table_details' table.id %}" class="table-link">
            <img class="table-img ib" src="{{ table.image.url }}" alt="">
            <p class="title ib">{{ table.name }}</p>
        </a>
    </div>
{% else %}
    <div data-index="{{ table.id }}" class="table table-item"></div>
    <script>
        console.log("hello world 1");
        // 直接通过模板变量获取商品ID，无需依赖DOM元素引用
        const tablid = "{{ table.id }}";
        console.log(tablid);
        
        $.ajax({
            type: 'POST',
            url: '{% url "basket:basket_delete" %}',
            data: {
                tableid: tablid,
                csrfmiddlewaretoken: "{{ csrf_token }}",
                action: 'post'
            },
            success: function (json) {
                $('.table-item[data-index="' + tablid + '"]').remove();
                document.getElementById("subtotal").innerHTML = json.subtotal;
                document.getElementById("basket-qty").innerHTML = json.qty;
            },
            error: function (xhr, errmsg, err) {
                console.error("移除失效商品失败:", errmsg);
            }
        });
    </script>
{% endif %}

关键修正点 #

• 移除$(document).ready()包裹：这段脚本随DOM元素渲染后立即执行，无需等待整个文档加载完成（确保jQuery已在页面中加载）。
• 直接使用模板变量{{ table.id }}获取商品ID：避免了对this的错误引用，确保ID值准确。
• 删除无效的event.preventDefault()：消除无意义的方法调用错误。

内容的提问来源于stack exchange，提问作者PHILLIPP APETENOK