使用Thymeleaf的th:onclick调用JS函数时出现未定义引用错误

问题分析与修复方案 #

1. 函数名拼写不匹配 #

你报错提示getMenuResults未定义，但代码里的函数名是getMenu、th:onclick调用的也是getMenu。先排查实际代码中是否存在函数名拼写错误，比如是否误将getMenu写成getMenuResults，或者调用时写错了函数名。

2. Thymeleaf表达式语法错误 #

th:onclick中嵌入变量的写法不符合Thymeleaf规范，正确写法有两种：

• 用单引号包裹字符串类型变量（数字类型可省略）：

th:onclick="getMenu('[[${menu.dictId}]]')"

• 使用Thymeleaf的|字符串拼接语法：

th:onclick="|getMenu(${menu.dictId})|"

错误写法会导致Thymeleaf无法正确渲染变量，进而引发JS语法错误。

3. JS函数作用域问题 #

确保<script>标签放在</body>之前（页面底部），这样DOM元素渲染时函数已被定义。如果必须放在<head>中，需用DOM加载事件包裹函数：

document.addEventListener('DOMContentLoaded', function() {
  window.getMenu = function(menuId) {
    console.log(menuId);
  }
});

避免因DOM元素先于函数加载完成，导致调用时函数未定义。

4. 排查函数覆盖或解析错误 #

在浏览器控制台直接输入getMenu回车，检查是否能找到该函数。如果找不到，排查页面中是否有同名函数覆盖，或JS代码存在语法错误导致函数未被正确解析。

修复后的完整示例代码 #

<div>
  <a
    th:each="menu : ${menus}"
    th:onclick="|getMenu(${menu.dictId})|"
    th:text="${menu.dictName}"
  ></a>
</div>

<script>
  function getMenu(menuId) {
    console.log(menuId);
  }
</script>

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