JQuery получить атрибуты данных из элемента в таблице

Question

Предположим, у меня есть таблица, заполненная бритвой @foreach l oop.

Для каждой строки у меня есть кнопка удаления, которая выглядит примерно так:

.....
<tr>
    <div style="cursor: pointer; display: inline-block; margin-left:5px" id="deleteEntity" data-Id="@Student.Id" data-Name="@Student.Name" data-Age="@Student.Age">                
        <i class="far fa-trash-alt"></i>
        <span style="color:#bfbfbf">Delete</span>
    </div>
</tr>

Мне нужна функция jQuery, способная извлекать атрибуты данных из мой #deleteEntity див. Поэтому я сделал что-то вроде этого:

$('#deleteEntity').on("click", function (event) {

    var button = $(event.target);
    var Id = button.data('Id')
    var Name = button.data('Name')
    var Age = button.data('Age')
    debugger;
});

Однако, исходя из того, что я сделал выше, все мои значения равны Undefined.

• Следовательно, как исправить это, чтобы я получил значения, указанные c для этой кнопки удаления в моей таблице?

Answer 1

Вы должны быть в состоянии получить кнопку от $(this) внутри обработчика. Однако , вы повторно используете один и тот же id на каждой кнопке, поэтому поведение обработчика щелчков по существу не определено. Вместо этого вы захотите использовать class.

Кроме того, имя атрибута data-* не должно содержать заглавных букв. Просто сделайте их строчными.

Например:

$('.deleteEntity').on("click", function (event) {
    var button = $(this);
    var id = button.data('id');
    var name = button.data('name');
    var age = button.data('age');
    console.log(id);
    console.log(name);
    console.log(age);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="cursor: pointer; display: inline-block; margin-left:5px" class="deleteEntity" data-id="@Student.Id" data-name="@Student.Name" data-age="@Student.Age">                
    <i class="far fa-trash-alt"></i>
    <span style="color:#bfbfbf">Delete</span>
</div>