Question

假设我有一堆共享点击事件的链接：

<a href="#" class="do-stuff">Click me</a>
<a href="#" class="do-stuff">Click me</a>
<a href="#" class="do-stuff">Click me</a>
<a href="#" class="do-stuff">Click me</a>

并在$（'。do-stuff'）中。单击函数我执行一个JQuery ajax POST请求，用一些东西更新数据库，我得到一个成功的响应。在ajax完成之后，我只想将链接文本的值更改为我从服务器发回的任何内容...

$('.do-stuff').click(function () {
$.ajax({
  type: "POST",
  url: "MyWebService.asmx/DoSomething",
  data: '{CurrentLinkText: "'+ $(this).text() +'"}',
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (result) {
    $(this).text(result.d);
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(textStatus);
  }
});

}）;

这调用很好，我确认“result.d”确实是来自服务器的文本，但文本没有改变。我认为在AJAX发布后，$（this）元素不再可访问？我该怎么做才能解决这个问题？

Answer 1

通常，当您丢失此类上下文时，可以保存对该对象的引用。像这样：

function clickHandler() {
    var that = this;
    $.ajax( { url: '#',
        success: function (result) {
            $(that).text(result.d);
        }
    );
}

Answer 2

见这里： $(this) inside of AJAX success not working

您可以设置context option：

此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的ajax设置（$ .ajaxSettings与传递给$ .ajax的设置合并）。（...）

示例：

$.ajax({
    //...
    context: this,
    success: function(json) {
        //...
    }
});

或使用$.proxy：

$.ajax({
    //...
    success: $.proxy(function(json) {
         //...
    }, this)
});

Answer 3

尝试：

success: $.proxy(function(result) {
         //...
    }, this)

Answer 4

有很多方法可以做到这一点，你可以从这里的答案中看到。就个人而言，我更喜欢构造一个绑定到this的当前值的函数：

success: (function(target) {
              return function(result) {
                   $(target).text(result.d);
              }
         })(this)

整洁，干净，$(this)将保持与外在背景相同;即它将成为引发事件的元素。

Answer 5

jQuery('#youridvalue').html(result.d);
jQuery('.yourclassvalue').html(result.d);

使用它

jQuery $（this）在ajax POST后无法访问？

5 个答案: