我有一张桌子
<table id="favoriteFoodTable">
<th>
Food Name:
</th>
<th>
Restaurant Name:
</th>
<th>
</th>
<?PHP while ($row = $foods->fetch()) {
?>
<tr>
<td>
<?PHP echo $row['foodName']; ?>
</td>
<td>
<?PHP echo $row['restaurantName']; ?>
</td>
<td>
<a class="deleteLink" href="" >delete</a>
</td>
</tr>
<?PHP } ?>
</table>
我使用这个jquery函数，所以当用户点击删除时，行的背景将改变，然后行将被删除
$(document).ready(function() {
$("#favoriteFoodTable .deleteLink").on("click",function() {
var td = $(this).parent();
var tr = td.parent();
//change the background color to red before removing
tr.css("background-color","#FF3700");
tr.fadeOut(400,function(){
tr.remove();
});
});
});
解决方法
该行被删除，但是当点击使您遵循链接时，刷新页面后立即恢复。
添加返回false;或event.preventDefault();在回调结束时防止默认行为：
$(document).ready(function() {
$("#favoriteFoodTable .deleteLink").on("click",function() {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(400,function(){
tr.remove();
});
return false;
});
});
请注意，我使用最接近一个更可靠的代码：如果另一个元素在之间，tr将仍然被找到。
