не может удалить более одной строки таблицы, не обновляя страницу

Question

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

Когда я нажимаю «удалить» на одном из файлов строк, он выполняет хорошо, но потом, если я нажимаю на другой (удалить), Ничего не произошло. На сервере не удаляется файл, и строка не удаляется, как если бы он полностью игнорировался.

Answer 1

Вам необходимо использовать class="delete-file" вместо id="delete-file" - и, конечно же, соответствующий переключатель $(".delete-file").

Идентификаторы должны быть уникальными для каждого документа, а ваш код привязывает обработчик к первому элементу id="delete-file".

Answer 2

Вот вам решение:

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

Javascript является:

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

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

Answer 4

Эта строка:

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