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

Question

我是百里香新手。最近我无意中遇到了以下情况。这是我的 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 中不喜欢它。

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

Answer 1

不确定问题到底是什么（尽管它可能与onclickvs相关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>

（请注意，我使用的onclick是而不是th:onclick.