jQuery 最接近的 TR 选择

Question

希望有人指教。单击链接后尝试删除行时遇到问题。

HTML

<table>
  <tr><td>Some Data</td><td><a href="#" class="remove-row>Remove Row</a></td></tr>
  <tr><td>Some Data</td><td><a href="#" class="remove-row">Remove Row</a></td></tr>
</table>

现在是 JS

 $("a.remove-row").live('click', function(eve){
  eve.preventDefault();
  $.ajax({
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(this).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

这应该非常简单，但它不会删除该行。如果我将其更改为类似的内容，只是为了好玩

$('.remove-row').addClass('foo');

它将把 foo 添加到所有表行。所以可以理解为什么它不删除最近的行。

有什么想法吗？

提前致谢。

Answer 1

问题是 this 当前引用了 success 回调中的 ajax 对象，但它很容易修复，使用 content 选项，例如这个:

 $("a.remove-row").live('click', function(eve){
  eve.preventDefault();
  $.ajax({
   context: this,                    //add this here!
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(this).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

context 选项规定了 this 在 $.ajax() 中的内容。回调函数，因为您希望它是您单击的 .remove-row，所以使用 this 作为选项。