Thymeleaf th:onclick 事件 - 调用确认函数答案

【问题标题】：Thymeleaf th:onclick event - calling confirm functionThymeleaf th:onclick 事件 - 调用确认函数
【发布时间】：2020-05-16 10:24:29
【问题描述】：

我是 Thymeleaf 的新手。最近我偶然发现了以下情况。这是我的 Thymeleaf html 页面的一部分：

<!-- an delete button link -->
<a th:href="@{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
    class="btn btn-danger btn-sm py-1 "
    th:onclick="if(!(confirm('Are you sure you want to delete this employee ?') )) return false" >
    Delete
</a>

此代码可以正常工作。但是，我想添加员工姓名作为确认的一部分。代码如下：

<!-- an delete button link -->
<a th:href="@{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
    class="btn btn-danger btn-sm py-1 "
    th:onclick="if(!(confirm('Are you sure you want to delete this employee ' + '\'+${tempEmployee.firstName}+\'' +'?' ) )) return false" >
    Delete
</a>

不幸的是，结果是： Are you sure you want to delete this employee '+${tempEmployee.firstName}+'.

Thymeleaf 似乎无法识别 ${tempEmployee.firstName}。在 th:href 标签里没问题，在 th:onclick 里不喜欢。

如果有人能把我引向正确的方向，我将不胜感激。

【问题讨论】：

标签： spring thymeleaf

【解决方案1】：

不确定到底是什么问题（尽管它可能与 onclick 和 th:onclick 有关。无论如何，我认为更像这样的格式会起作用（有一些额外的好处，比如没有 JavaScript 注入）。

<!-- an delete button link -->
<a
  th:href="@{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
  class="btn btn-danger btn-sm py-1 "
  th:data-confirm-delete="|Are you sure you want to delete this employee ${tempEmployee.firstName}?|"
  onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false"
>
  Delete
</a>

（注意我使用的是onlick，而不是th:onclick。

【讨论】：

【解决方案2】：

而不是上面代码中的这一行---onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">

你可以写成： onclick="return confirm(this.getAttribute('data-confirm-delete'))"

【讨论】：