Почему th: attr в кнопке не отправляет правильные данные?

Question

    <th:block th:each="fh : ${datacenterFisicHosts}">
        <div>
            <tr class="row">
                <td id="fisicHostName" th:text="${fh.name}"></td>
                <td id="fisicHostIp" th:text="${fh.ip}"></td>
                <td id="fisicHostOS" th:text="${fh.operatingSystem}"></td>
                <td id="fisicHostNotes" th:text="${fh.notes}"></td>
                <td>
                    <button class="credentialsButton btn btn-default btn-sm" th:attr="data-fisic-host-id=${fh.id}">CREDENCIALES</button>
                </td>
                <td>
                    <button class="btn btn-default btn-sm btn-deleteFH" th:attr="data-fhId=${fh.id}">
                        <span class="glyphicon glyphicon-remove-sign"></span> Eliminar
                    </button>
                </td>
            </tr>
        </div>
    </th:block>
</table>

Это странно, потому что это работает:

<button class="credentialsButton btn btn-default btn-sm" th:attr="data-fisic-host-id=${fh.id}">CREDENCIALES</button>

, а это не так:

<button class="btn btn-default btn-sm btn-deleteFH" th:attr="data-fhId=${fh.id}">
                        <span class="glyphicon glyphicon-remove-sign"></span> Eliminar
                    </button>

Это код JS для неработающей проблемы:

 $('.btn-deleteFH').click(function() {
    var fisicHostId = $(this).data('fhId');
    console.log(fisicHostId);
});

Когда я нажимаю на кнопку, в консоли появляется 'undefined'.

Что я делаю не так?

Answer 1

jQuery data() работает только с атрибутами, которые начинаются с data-

Измените его на

th:attr="data-fhId=${fh.id}"

Также вы не можете использовать this в функции стрелки, так как стрелкафункции не имеют явного this

Изменить

$('.btn-deleteFH').click( () => {

На

$('.btn-deleteFH').click(function() {