javascript - 在不刷新页面的情况下不能删除多个表格行

Question

在 MVC 中，我通过迭代 View 模型的“列表”在 View 中构建了一个表。

@foreach(var item in Model)
{
<tr id="row-@item.name">
    <td>
        @item.type
    </td>
    <td >
        @Html.ActionLink((string)item.name, "Download", "FileUpload", new { rout = item.rout, fileName = item.name }, null)
    </td>
    <td>
        @item.size
    </td>
    <td>
        <a href="#" id="delete-file" del-url="@item.delete_url">Delete</a>
    </td>
</tr>

当我加载页面时，我会得到一个文件列表，每个文件都有一个“删除”链接。

我用 jQuery 实现了一个基本的“删除行”方法:

$('#delete-file').click(function() {
    var delUrl = $(this).attr('del-url');
    $.post(delUrl, null, removeRow(),'json')
});

function removeRow() {
   $($('#delete-file').closest('tr')).fadeOut('slow');
}

当我在其中一个文件行上单击“删除”时，它运行良好，但是如果我单击另一个(删除)，则没有任何反应。服务器上没有文件被删除，行也没有被删除，就好像它被完全忽略了一样。

Answer 1

您需要使用 class="delete-file" 而不是 id="delete-file" - 当然还有相应的 $(". delete-file") 选择器。

每个文档的 ID 都是唯一的，您的代码将处理程序绑定(bind)到第一个 id="delete-file" 元素。