0

У меня есть такой 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>

5
  • 1
    $('.btn-delete') != $('#btn-delete')
    – ArchDemon
    28 фев 2021 в 10:56
  • console.log(e.target.dataset.userId); или console.log($(e.target).data('user-id'));
    – InDevX
    28 фев 2021 в 10:56
  • Забыл уточнить, $('.btn-delete') - это сама кнопка "Удалить", хранящая дата атрибут, а $('#btn-delete') - это кнопка в модальном окне, она ничего не хранит
    – Vanya228
    28 фев 2021 в 11:00
  • @KekJS непонятная у вас система... а как вы удаляете что-либо кликом по кнопке в модальном окне? Добавьте работающий пример
    – InDevX
    28 фев 2021 в 11:08
  • Вот пример jsfiddle.net/9f5kjpwv/19 Нужно по нажатию кнопки "Да" в модальном окне, получать data-user-id каждой записи
    – Vanya228
    28 фев 2021 в 11:23

2 ответа 2

1

$('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>

0

Во-первых, поменяйте $('#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'));
    });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.