$（this）不在ajax的成功函数内工作

我使用ASP.NET MVC和Jquery，这似乎是一个jquery错误。

我正在对我的方法进行ajax调用，我的代码是

$('.reopenBtn').live('click', function () { var taskId = $(this).attr("data-taskid"); $.ajax({ url: '/Task/ReopenTask/?strTaskId=' + taskId, type: "POST", success: function (data) { // this does not work !! $(this).parent().parent().closest("div").remove(); }, error: function (xhr, ajaxOptions, thrownError) { alert('Error'); } }); }); 

remove不起作用，但是在这里为这个问题创建一个jsfiddle，这是有效的。

那么，在ajax调用的成功函数中， $(this)是不同的东西吗？

我该如何解决这个问题？ 谢谢

Answer 1

context属性将在ajax context: this,的success函数内部工作context: this,

 $('.reopenBtn').live('click', function () { var taskId = $(this).attr("data-taskid"); var self = this; $.ajax({ url: '/Task/ReopenTask/?strTaskId=' + taskId, type: "POST", success: function (data) { $(self).parent().parent().closest("div").remove(); }, error: function (xhr, ajaxOptions, thrownError) { alert('Error'); } }); }); 

或者您可以设置ajax选项的context属性。

   $('.reopenBtn').live('click', function () {    var taskId = $(this).attr("data-taskid");    $.ajax({      url: '/Task/ReopenTask/?strTaskId=' + taskId,      type: "POST", context: this,      success: function (data) {        $(this).parent().parent().closest("div").remove();             },      error: function (xhr, ajaxOptions, thrownError) {        alert('Error');      }    });  }); 

Answer 2

我更喜欢这个方法，用$ .proxy包装，两个args是回调函数， this是第二个参数。

 $.post('/foo', data, $.proxy(function(d){ // do stuff with data }, this)); 

我认为它是最短最干净的。

你也可以做其他人上面所说的，要么将其复制到that （ self是保留字）然后在回调中使用，要么使用$ .ajax和context: this参数。

Answer 3

click方法的上下文与success方法的上下文不同。 因此，你在内部函数中没有this 。 您可以通过使用像$this或clickedButton这样的局部变量来避免这种情况，并在success方法中使用它：

 $('.reopenBtn').live('click', function () { var $this = $(this) var taskId = $this.attr("data-taskid"); $.ajax({ url: '/Task/ReopenTask/?strTaskId=' + taskId, type: "POST", success: function (data) { // $this is taken from the outer function context $this.parent().parent().closest("div").remove(); }, error: function (xhr, ajaxOptions, thrownError) { alert('Error'); } }); }); 

有关详细说明，您可能需要查看JavaScript中的Closures