在 jQuery 中维护对此的引用

Question

我正在转换一堆超链接以使用 jQuery 发出简单的 GET 请求。我想在 Ajax 调用中维护对 this 的引用，是否需要使用 bind/live/其他东西？

$(document).ready(function(){
    $(".mylink").click(function(){
        var url = $(this).attr('href');
        $.get(url,function(data){
            $(this).parent().html(data); // this is now out of scope
        });
        return false;
    });
});

Answer 1

$(document).ready(function(){
    $(".moderate").click(function(){
        var $this = $(this);
        var url = $this.attr('href');

        $.get(url,function(data){
            $this.parent().html(data);
        });
        return false;
    });
});

那应该对你有用。

Answer 2

$(document).ready(function(){
    $(".moderate").click(function(){
        var url = $(this).attr('href');
        var that = $(this);
        $.get(url,function(data){
            that.parent().html(data);
        });
        return false;
    });
});

Answer 3

您需要将 this 保存到另一个变量，如下所示：

$(document).ready(function(){
    $(".mylink").click(function(){
        var realThis = this;
        var url = $(this).attr('href');
        $.get(url,function(data){
            $(realThis).parent().html(data); // realThis is now in scope
        });
        return false;
    });
});

AJAX 回调可以访问外部方法的变量，因此这种技术效果很好。

如果您想处理所有 .mylink 元素（甚至是后来添加的元素），则只需调用 live 即可。

Answer 4

javascript 中的作用域是一团糟:)

在 jQuery 1.4 中，您有一个内置的代理函数，可以将作用域带入任何回调中，请参阅： http://api.jquery.com/jQuery.proxy/。

但自己创建一个非常容易：

var proxy = function( fn, scope ) {
    if ( typeof fn !== 'function' ) {
        return function() {};
    }
    scope = scope || this;
    return function() {
        return fn.apply( scope, Array.prototype.slice.call(arguments) );
    };
}

$(document).ready(function(){
    $(".moderate").click(function(){
        var url = $(this).attr('href');
        $.get(url, proxy(function(data) {
            $(this).parent().html(data);
        }, this));
        return false;
    });
});

您还可以将范围放入变量中并稍后访问它：

$(document).ready(function(){
    $(".moderate").click(function(){
        var scope = this;
        var url = $(this).attr('href');
        $.get(url, function(data) {
            $(scope).parent().html(data);
        });
        return false;
    });
});