本文详解 Django 模板中因 event.preventDefault() 误用及 this 上下文错误导致的 JS 报错问题，提供可立即落地的修复方案，包括正确的 DOM 元素绑定、数据属性读取和 AJAX 删除逻辑。
本文详解 django 模板中因 `event.preventdefault()` 误用及 `this` 上下文错误导致的 js 报错问题，提供可立即落地的修复方案，包括正确的 dom 元素绑定、数据属性读取和 ajax 删除逻辑。
在 Django 模板中嵌入 JavaScript 时，一个常见陷阱是混淆事件处理函数的执行上下文（this 指向）。您遇到的 Uncaught TypeError: event.preventDefault is not a function 错误，根本原因在于：$(document).ready(...) 的回调函数接收的是 document 就绪事件对象，而非用户交互事件；此时调用 event.preventDefault() 无效，且 this 指向 document，导致 $(this).data('index') 返回 undefined。
✅ 正确做法：为元素显式绑定事件，而非依赖全局 ready
不应在 {% else %} 分支中将整个 <script></script> 块包裹在 $(document).ready() 内（尤其当该脚本随每个非激活商品重复渲染时），而应：
-
为待操作的 DOM 元素添加唯一标识（如
id或class）； - 在文档就绪后，通过选择器精准绑定事件；
-
确保
this指向目标元素，从而正确读取data-index。
以下是重构后的推荐写法（模板部分）：
Django Unfold
下载
提供使用 django-unfold (v0.56+) 构建高级 Django 管理界面的专业指导。当用户提及 django-unfold、unfold admin 等内容时使用此技能。
{% if table.is_active %}
<div data-index="{{ table.id }}" class="table table-item">
<a href="%7B%%20url%20'table_details'%20table.id%20%%7D" class="table-link">
@@##@@
<p class="title ib">{{ table.name }}</p>
</a>
</div>
{% else %}
<!-- 仅渲染空 div，不内联 script -->
<div id="inactive-table-{{ table.id }}" data-index="{{ table.id }}" class="table table-item inactive-placeholder"></div>
{% endif %}
然后，在模板底部或独立 JS 文件中统一处理（避免重复绑定）：
<script>
$(document).ready(function() {
// 为所有标记为 inactive-placeholder 的 div 绑定点击删除逻辑
$('.inactive-placeholder').each(function() {
const $el = $(this);
const tablid = $el.data('index'); // ✅ this 正确指向当前 div
// 发起删除请求（此处以点击触发为例；也可自动执行）
$.ajax({
type: 'POST',
url: '{% url "basket:basket_delete" %}',
data: {
tableid: tablid,
csrfmiddlewaretoken: '{{ csrf_token }}',
action: 'post'
},
success: function(json) {
$el.remove(); // ✅ 移除当前元素
$('#subtotal').text(json.subtotal);
$('#basket-qty').text(json.qty);
},
error: function(xhr, status, error) {
console.error('Basket delete failed:', error);
}
});
});
});
</script>
⚠️ 关键注意事项
-
不要在循环中重复定义
$(document).ready()：它应在页面加载时全局执行一次，否则可能引发多次绑定或作用域混乱。 -
csrfmiddlewaretoken必须安全传递：模板中使用{{ csrf_token }}（字符串值），而非"{{csrf_token}}"（易被转义）；更佳实践是通过<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">提取。 -
避免内联脚本污染模板逻辑：将业务 JS 抽离至外部文件，并通过
data-*属性传参，提升可维护性。 -
考虑使用原生 JS 替代 jQuery（如项目已支持 ES6+）：
document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.inactive-placeholder').forEach(el => { const tablid = el.dataset.index; // ... 后续 fetch 调用 }); });
通过以上调整，既能彻底解决 event.preventDefault() 类型错误，又能确保 data-index 稳定读取，使购物篮中非激活商品的自动清理逻辑健壮可靠。
