3

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

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

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

4

4 回答 4

4

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

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

于 2012-05-20T14:48:53.937 回答
4

这是你的解决方案：

http://jsfiddle.net/irpm/enEAt/1/

javascript是：

$('.delete-file').click(function(e) {
    $(this).closest('tr').remove();
});​
于 2012-05-20T14:52:20.307 回答
3

您需要防止<a>元素的默认操作，并使用正确的选择器

$('.delete-file').click(function(e) {
    e.preventDefault();
    var self=this,
        delUrl = $(this).attr('del-url');
    $.post(delUrl, function() {
        $(self).closest('tr').fadeOut('slow');
    },'json');
});
于 2012-05-20T14:53:22.403 回答
3

这一行：

$.post(delUrl, null, removeRow(),'json');

简单地等同于：

$.post(delUrl, null, undefined, 'json');

因为removeRow()函数不返回任何东西。将该行更改为：

$.post(delUrl, null, removeRow,'json');   //Without '()' after 'removeRow'

我猜你的removeRow功能不会像你预期的那样工作。该功能将隐藏所有行，但您只需隐藏单击“删除文件”的那一行。因此，您需要将该行的引用传递给removeRow函数。这是一种方法：

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

function removeRow($row) {   $row.fadeOut('slow');   }
于 2012-05-20T14:54:05.633 回答