数据标识

Question

我有一个导致模态视图的按钮。我尝试用JS拦截这个值。

它的工作原理如下：

<button type="button" class="btn btn-outline-primary btn-sm"
    data-toggle="modal" data-target="#myModal" data-person-id="something">
  Edit
</button>

JaveScript ：

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

它不能像这样工作：

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

JS：

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

或

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

var是未定义的。

由于我使用的是Thymeleaf，我需要使用data-th-id来捕获值。

知道如何获得价值

完成JS

$('#myModal').on('shown.bs.modal', function (e) {
    $('#myInput').focus();
    var bookId = $(e.relatedTarget).data('id');
    alert(e.relatedTarget.nodeName);
    alert(bookId);
});

Answer 1

data-person-id="something"是一个数据属性，可通过$('...').data('person-id')进行访问。

data-th-id="${person.getId()}"不是数据属性。这只是说th:id的另一种方式，它输出标签的id="..."属性。您不能在非数据属性上使用jQuery的.data()方法，而是使用attr() - $(e.relatedTarget).attr('id');