Question

我使用foreach循环从模型填充数据表：

@foreach(var item in Model)
    {        
    <tr>
        <td style="display: none">@item.Id</td>
        <td>@item.Name</td>
        <td>@item.Description</td>
        <td>
            <div class="btn-group">
               <button type="button" class="btn btn-default" data-dismiss="modal">Update</button>
                <button type="button" data-id=@item.Id id="Delete" class="btn btn-danger" data-dismiss="modal">Delete</button>
            </div>
        </td>
    </tr>
    }

表格的每一行都有一个更新和删除按钮。

我正在努力使用jQuery将按钮绑定到click事件。

到目前为止，这是我的脚本，它位于文档就绪函数中：

    var table = $('#productTable').DataTable();

    $('#productTable tbody').on('click', 'tr', function () {
        var data = table.row(this).data();
        alert(Product ID = ' + data[0] + ');

//Call delete function and pass in Id
    });

可以理解的是，只要用户点击该行，就会显示警报。如何在单击删除按钮时才启动它？

提前感谢您的帮助。

Answer 1

您可以使用 doutriforce 建议并将事件绑定到类，例如：

$("#productTable tbody").on("click", ".btn-update", function() {
    // Your update code here
    // Use $(this) to access the button that triggered this event
}
$("#productTable tbody").on("click", ".btn-delete", function() {
    // Your delete code here
    // Use $(this) to access the button that triggered this event
}

我使用过： $（“＃productTable tbody”）。on（“click”，“，function）; 因为它也适用于动态添加的元素（在本例中为表格行））。

Answer 2

根据文档here，您似乎需要编辑绑定click事件的选择器，如下所示：

$('#productTable button#Delete').on('click', function () { 
    var data = table.row(this).data();
    alert(Product ID = ' + data[0] + ');
});

查询foreach循环内按钮的click事件

2 个答案: