Thymeleaf模板中引入的JavaScript无法正常工作的问题求助

可能的问题点及解决方案： #

我帮你梳理几个常见的导致这种情况的原因，你可以逐一排查：

1. 静态资源路径错误
   你当前用相对路径引入JS：

<script src="../static/js/stavkeCenovnika.js"></script>

在Thymeleaf中，正确的静态资源引用应该使用Thymeleaf的URL表达式@{...}，这样能保证路径在任何页面层级下都正确（默认Spring Boot静态资源放在src/main/resources/static目录下，访问时直接从根路径开始）：

<script th:src="@{/js/stavkeCenovnika.js}"></script>

2. 缺少jQuery依赖
   你的JS代码用了jQuery的语法（比如$("#addStavkaCenovnika")），而且Bootstrap的JS也依赖jQuery，但你的模板里完全没有引入jQuery文件！这会导致所有jQuery相关代码都无法执行。

你需要先把jQuery文件下载到src/main/resources/static/js/目录下，然后在引入Bootstrap JS之前先引入它：

<script th:src="@{/js/jquery.min.js}"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script th:src="@{/js/stavkeCenovnika.js}"></script>

3. DOM未加载完成就执行JS
   你的JS代码直接绑定了点击事件，但如果JS执行时对应的DOM元素还没渲染完成，事件绑定就会失败。你可以把JS代码包裹在$(document).ready()里，确保DOM加载完成后再执行：

$(document).ready(function() {
    $("#addStavkaCenovnika").click(function (e) {
        $("#addModal").modal("show");
        $("#confirmSave").on("click", function (e) {
            var cena = $("#cena").val();
            var roba = $("#roba").val();
            var cenovnikid = $(".cenovnikId").val();
            $.ajax({
                url: "/stavkeCenovnika",
                dataType: "json",
                contentType: "application/json",
                type: "GET",
                data: {
                    cenovnikId: cenovnikid,
                    cena: cena,
                    robaId: roba,
                },
                complete: function (data) {
                    window.location.reload();
                },
            });
            $("#addModal").modal("hide");
        });
    });
});

4. 额外的小问题：Thymeleaf命名空间错误
   你的模板里Thymeleaf的命名空间写错了：

<html xmlns:th="http/www.thymeleaf.org">

正确的应该是：

<html xmlns:th="http://www.thymeleaf.org">

这个错误会导致Thymeleaf的属性无法被正确解析，虽然和JS不直接相关，但也建议修正。

你可以先按上面的步骤排查，应该能解决JS不生效的问题。

备注：内容来源于stack exchange，提问作者predrag