在MVC中,我通过迭代视图模型的“List”在视图中构建了一个表。
@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');
}
当我在其中一个文件行上单击“删除”时,它表现良好,但是,如果我点击另一个(删除),则没有任何反应。服务器上没有删除任何文件,并且不会删除该行,就好像它被完全忽略一样。
答案 0 :(得分:4)
您需要使用class="delete-file"
代替id="delete-file"
- 当然还需要使用相应的$(".delete-file")
选择器。
每个文档的ID都是唯一的,您的代码会将处理程序绑定到第一个id="delete-file"
元素。
答案 1 :(得分:4)
这是你的解决方案:
http://jsfiddle.net/irpm/enEAt/1/
javascript是:
$('.delete-file').click(function(e) {
$(this).closest('tr').remove();
});
答案 2 :(得分: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');
});
答案 3 :(得分: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'); }