Django模板中onclick无法调用JS函数的问题排查

你遇到的问题核心是ES模块的作用域隔离：当你在base.html里用type="module"引入app.js时，这个JS文件会被当作ES模块执行，模块内部的所有变量、函数默认都被限制在模块自己的作用域里，不会自动挂载到全局的window对象上。而HTML标签的onclick属性是在全局作用域里查找函数，自然找不到summon_chat。

反过来，你在模块内部用document.querySelector绑定事件时，是在模块作用域内直接调用summon_chat，属于同一作用域，所以能正常执行。

方案1：手动把函数暴露到全局（简单但不推荐） #

在app.js里，定义完summon_chat后，把它挂载到window对象上，让全局作用域能访问到：

function summon_chat(chat){
  // 你的逻辑代码
}
// 暴露到全局
window.summon_chat = summon_chat;

这样HTML里的onclick="summon_chat(this)"就能正常调用了。但这种方式会污染全局作用域，不符合模块化开发的理念，只适合临时测试。

方案2：用DOM事件绑定（推荐） #

保留type="module"的引入方式，在app.js里批量绑定点击事件，替代HTML里的onclick属性：

function summon_chat(chat){
  // 你的逻辑代码
}

// 给所有目标li元素绑定点击事件
document.querySelectorAll('.list-group-item.p-3').forEach(item => {
  item.addEventListener('click', function() {
    console.log('CLICKED');
    summon_chat(this);
  });
});

同时把HTML里的onclick属性删掉：

<li class="list-group-item p-3">

这种方式更符合现代JS开发规范，避免全局污染，还能统一管理事件逻辑。

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