Geek asks and answers

Cannot delete more than one row of a table without refreshing the page

In MVC, I built a table in a view, iterating over the “list” of the view model.

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

}

when I load the page, I get a list of files with a delete link for each.

I implemented using jQuery the basic "delete row" method:

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

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

When I click “delete” in one of the lines of the file, it works fine, but then if I click on the other (delete), nothing happens. The file is not deleted on the server, and the line is not deleted, as if it were completely ignored.

+3
source share
4 answers

You need to use class="delete-file"instead id="delete-file"- and, of course, the corresponding selector $(".delete-file").

, id="delete-file".

+4

:

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

javascript:

$('.delete-file').click(function(e) {
    $(this).closest('tr').remove();
});​
+4

<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

:

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

:

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

removeRow() . :

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

removeRow , , . , , "delete-file". 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');   }
+3

More articles:


All Articles