Получить атрибут data через JQuery?

Question

У меня есть такой HTML код, где кнопка "Удалить" выводиться циклом в PHP и хранит data-атрибут user-id. Когда я пытаюсь получить этот id в JQuery, то мне выводиться только id первой записи. То есть, при клике на остальные кнопки "Удалить" я получаю всегда одно значение data-user-id.

Как это исправить, помогите пожалуйста

// Удаление записи

$('document').ready(function() {
    $('#btn-delete').click(function(e) {
        console.log($('.btn-delete').data('user-id'));
        
    });
});

 <td>
    <button class="btn btn-delete popup-open" data-user-id="<?= $user['id']; ?>" >Удалить</button>
</td>

Answer 1

Во-первых, поменяйте $('#btn-delete') на $('.btn-delete'). Во-вторых, попробуйте следующий код:

$('document').ready(function() {
    $('.btn-delete').click(function(e) {
        console.log($(e.current).data('user-id'));
    });
});

Либо

$('document').ready(function() {
      $('.btn-delete').click(function(e) {
         console.log($(e.currentTarget).data('user-id'));
    });
});

Answer 2

$('document').ready(function() {
    $('.btn-delete').click(function(e) {
        console.log($(this).data('user-id'));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
    <button class="btn btn-delete popup-open" data-user-id="<?= $user['id']; ?>" >Удалить</button>
</td>

document.querySelectorAll('.btn-delete').forEach(button => {
//    button.onclick = e => {
//        console.log(e.target.dataset.userId);
//    }
    button.onclick = function() {
        console.log(this.dataset.userId);
    }
});

<td>
    <button class="btn btn-delete popup-open" data-user-id="<?= $user['id']; ?>" >Удалить</button>
</td>

БЛОГ НА HUSL

Получить атрибут data через JQuery?

Ответы (2 шт):