按钮触发模态框时，JS获取data-th-id属性值失败问题咨询

别急，这个问题其实是Thymeleaf的属性写法出错了，我帮你一步步搞定：

问题根源 #

你写的data-th-id="${person.getId()}"不是Thymeleaf绑定自定义data属性的正确方式，这种写法不会被Thymeleaf正确解析，最终渲染出来的按钮属性可能不是你期望的data-person-id格式，自然导致JS拿不到对应值。

正确的HTML写法 #

Thymeleaf对于自定义的data属性，需要用th:data-*的语法——把你要生成的data属性名放在th:data-后面。比如你要生成data-person-id，就写th:data-person-id：

<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#myModal" th:data-person-id="${person.getId()}"> Edit </button>

这样Thymeleaf渲染页面后，会输出和你第一个正常工作的按钮完全一致的属性结构：data-person-id="对应person的ID值"。

JS代码无需修改 #

你的JavaScript代码完全没问题，保持原来的写法就可以正常拿到值：

var bookId = $(e.relatedTarget).data('person-id');

额外排查小技巧 #

如果还是有问题，可以右键页面查看源码，检查渲染后的按钮是否真的带有data-person-id="xxx"这个属性，确认Thymeleaf已经正确把ID值渲染进去了。

内容的提问来源于stack exchange，提问作者Anna Klein