删除data-id属性值

Question

我是javascript新手。 我试图用data-id按钮删除值，但data-id值始终是我表上的第一个值。 我单击数据ID为“ 5”的按钮，但每次都将ID为“ 1”（最上面的ID）。 对不起，我的英语不好。

我的表格代码：

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Category Name</th>
            <th>Status</th>
            <th>User</th>
            <th>Management</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td><span class="label label-success">@item.ID</span></td>
                <td>@item.CategoryName</td>
                <td>@if (item.Status == true)
                    {
                        <b class="label label-success">Active</b>
                    }
                    else
                    {
                        <b class="label label-danger">Passive</b>
                    }
                    </td>
                <td><a href="#">@item.User.Name</a></td>
                <td>
                    <button class="btn btn-default btn-sm">Edit</button>
                    <button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory()" data-id="@item.ID">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

我的JavaScript代码：

function DeleteCategory() {
    var caughtID= $("#btn-Delete").attr("data-id");

    $.ajax({
        url: "/Category/Delete/" + caughtID,
        type: "POST",
        dataType: "json",
        success: function (response) {
            if (response.Success) {
                bootbox.alert(response.Message, function () {
                    location.reload();
                });
            }
            else {
                bootbox.alert(response.Message, function () {
                    //it's null yet
                });
            }
        }
    })
}

Answer 1

Id必须是唯一的，但是在您没有id的情况下，您也可以做到这一点。

更改：-

onclick="DeleteCategory()"

至：-

onclick="DeleteCategory(this)"

接着：-

function DeleteCategory(ele) {
 var caughtID= $(ele).data("id");
 .....rest code

演示示例：-

 function DeleteCategory(ele){ alert($(ele).data('id')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory(this)" data-id="1">Delete</button> <button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory(this)" data-id="2">Delete</button> <button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory(this)" data-id="3">Delete</button> 

一个纯jQuery解决方案是：-

将id="btn-Delete"更改为class ="btn-Delete"并删除onclick如下所示：-

<button class="btn btn-default btn-sm btn-Delete"  data-id="@item.ID">Delete</button>

然后仅更改此行：

var caughtID= $("#btn-Delete").attr("data-id");

至：-

var caughtID = $(this).data("id");

Answer 2

正如罗里评论的id属性必须唯一！ 。 您应该将按钮的ID更改为class，然后单击static元素。 由于按钮是动态创建的，因此可能会导致您遇到问题。

<button class="btn btn-default btn-sm btn-Delete" data-id="@item.ID">Delete</button>

$(document).ready(function() {
$('table').on('click', '.btn-Delete', function(event) {
    event.preventDefault();
    var caughtID = $(this).attr("data-id");
    $.ajax({
        url: "/Category/Delete/" + caughtID,
        type: "POST",
        dataType: "json",
        success: function(response) {
            if (response.Success) {
                bootbox.alert(response.Message, function() {
                    location.reload();
                });
            } else {
                bootbox.alert(response.Message, function() {
                    //it's null yet
                });
            }
        }
    })
});
});