Thymleaf里面如何使用onclick事件

问题描述

今天做一个小项目时遇到了一个问题：

在thymleaf中如何触发js的点击事件？我写了一个js的点击事件，但其中的参数不是固定的，是需要随时点击变化的，在如何传参数的问题上我纠结了很久，也在网上找了很多解决方法，最终找到了一种，经实践可以使用。

这是我的thymleaf需要添加点击事件的地方：

<button type="button" class="btn btn-sm btn-default" th:onclick="'javascript:checkbox.showDetail(\''+${user.id}+'\')'"><i class="fa fa-search"></i></button>

使用了th：onclick标签后，最终调取如下的js函数：

//查看详情
    var handleShowDetail = function (id) {
        $.ajax({
            url: "/user/detail?id="+id ,
            type: "get",
            dataType: "html",
            success: function (data) {
                $("#modal-detail-body").html(data);
                $("#modal-default2").modal("show");
            }
        });
    };

我是准备传入一个字符串，在传参数时，我本来想着可以整个字符串的变化不会影响到js函数，但试了好几种拼接方法都没有将字符串和数字拼接在一起，最后放弃了，选择了只传入参数，在js内部进行拼接。

注意事项

1. th:onclick 之后一定要记得加javascript:，否则不会生效
2. 要用''包住整个javascript:的代码，其中在传参的时候需要用转义字符\' \'将参数包裹起来,参数也要写成'+${user.id}+',这样才会有效果