如何在$ .ajax的成功回调中传递$（this）

I have seen a few different examples of accessing $(this) is the success callback of ajax but none give me the answer I want - they all access $(this) within the ajax function, I want to pass $(this) to a separate function.

我已经看到了访问$（this）的几个不同的例子是ajax的成功回调但没有给我我想要的答案 - 他们都在ajax函数中访问$（this），我想将$（this）传递给a单独的功能。

So if there are 2 textboxes that need to be validated

因此，如果有2个文本框需要验证

$("#tb1").focusout(function(){
    $.ajax({
        type:'POST',
        url: 'validURL',
        data: {various_parameters},
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data){
            validInput(data, $(this));
        },
        error: error
    });
}

$("#tb2").focusout(function(){
    $.ajax({
        type:'POST',
        url: 'validURL',
        data: {various_parameters},
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data){
            validInput(data, $(this));
        },
        error: error
    });
}

function validInput(response, obj){
    console.log(response.d);
    console.log(obj.val());
};

When I run the code I get the correct value for response.d but an error : jquery-1.11.1.min.js:4 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined for obj.val().

当我运行代码时，我得到了响应的正确值。但是出现了错误：jquery-1.11.1.min.js：4未捕获的TypeError：无法读取obj.val（）的undefined属性'toLowerCase'。

Am I doing something wrong?

难道我做错了什么？

Thanks for any help. See:Dos/Run

谢谢你的帮助。请参阅：DOS /运行

4 个解决方案

#1

$(this) is relative to the inner-most function, and in this case you'll need to assign $(this) to a variable before the ajax query, and use that variable in the success instead.

$（this）相对于最内层函数，在这种情况下，您需要在ajax查询之前将$（this）赋值给变量，并在成功中使用该变量。

$("#tb1").focusout(function(){
    var elem = $(this);
    $.ajax({
        type:'POST',
        url: 'validURL',
        data: {various_parameters},
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data){
            validInput(data, elem);
        },
        error: error
    });
}

#2

Well that is because context of focusout element is lost in ajax call.

那是因为聚焦元素的上下文在ajax调用中丢失了。

You can set context option in ajax to reference of DOM object for setting context in ajax to element context:

您可以在ajax中设置context选项以引用DOM对象，以便将ajax中的上下文设置为元素上下文：

$("#tb2").focusout(function(){
  $.ajax({
    type:'POST',
    url: 'validURL',
    context : this,
    data: {various_parameters},
    contentType: 'application/json; charset=utf-8',
    dataType:'json',
    success: function(data){
        validInput(data, $(this));
    },
    error: error
  });
});

#3

Alternative way you can achieve this is by referencing it in the first place.

您可以通过首先引用它来实现此目的的替代方法。

$("#tb2").focusout(function(){
    var $this = $(this);
    $.ajax({
        type:'POST',
        url: 'validURL',
        data: {various_parameters},
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data){
            validInput(data, $this);
        },
        error: error
    });
}

#4

The 'this' keyword within your success function, is a different 'this' that exists before your Ajax call, it's a different 'scope'.

成功函数中的'this'关键字是在Ajax调用之前存在的不同'this'，它是一个不同的'范围'。

Make a new variable for the initial 'this' so you can use it within the success callback, like so:

为初始'this'创建一个新变量，以便您可以在成功回调中使用它，如下所示：

$("#tb1").focusout(function(){
    var $this = $(this);
    $.ajax({
        type:'POST',
        url: 'validURL',
        data: {various_parameters},
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data){
            // Here we use the $this variable, initialised before the $.ajax call.
            validInput(data, $this);
        },
        error: error
    });
}

#1