Question

我是javascript的新手。我试图用data-id按钮删除值，但data-id值总是在我的表上获得第一个值。我点击数据ID为＆＃34; 5＆＃34;但作为id，它是＆＃34; 1＆＃34; （最顶级的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必须是唯一的，但在没有onclick="DeleteCategory()"的情况下，它也可以实现，你想做什么。

变化： -

onclick="DeleteCategory(this)"

要： -

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

然后： -

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

演示示例： -

＆＃13;

<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>

＆＃13;

id="btn-Delete"

＆＃13;

纯jQuery解决方案是： -

将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");

要： -

{{1}}

Answer 2

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

<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
                });
            }
        }
    })
});
});

删除data-id属性值

2 个答案: