Question

我有一个JavaScript函数，使用jQuery ajax $.post(...来查询数据库，然后返回JSON代码以便由回调函数处理。

<a href="#" iid="234" class="tooltp wish-clicked" data-original-title="Add to Watch List"><i class="icon-heart" style="color:red"></i> Add to Watch List</a>

调用功能：

$(".wish-clicked").click(function(e){
    e.preventDefault();
    var callback = function (data, obj){
        var obj = jQuery.parseJSON(data);
        alert($(obj).html()); //B
        if (!obj.error) {
            $(obj).html("Watching");                
        } else {
            alert("Failed to set item for watching");                   
        }
    };
    alert($(this).html()); //A
    setWishList($(this).attr("iid"), callback, this);
});

当用户点击带有.wish-clicked类的链接时，它会激活此功能。

setWishList()存在于另一个.js文件中，并且是：

function setWishList(iid, callback, obj) {
    $.post("set_wish_list.php", {iid: iid}, function(data) {
        phpErrPlusParam(data, callback, obj);
    }).fail(function() { errLive(data) });
}

这将数据传递给定义为的函数phpErrPlusParam：

function phpErrPlusParam(data, callback, param) {
    if (err(data)) {
        alert('System Error: ' + data); 
    } else {
                    //C
        return callback(data, param);   
    }
}

然后回调运行并处理结果。问题是我也在点击事件中传递'this'对象。标记为//的部分将返回被单击的元素链接的html。标记为// B的部分（它包含相同的对象（它仍然显示我已经在chrome调试器中检查过）显示为null。

我对这里发生的事情感到困惑，在某个地方，对象失去了返回html()的能力？

编辑：它停止给出正确输出的点是// C（即当它被给予回调时。

Answer 1

你应该使用局部变量来保存它，然后引用它，因为回调在同一个函数中，如下所示：

$(".wish-clicked").click(function(e){
    e.preventDefault();
    var $this = $(this);
    var callback = function (data, obj){
        var obj = jQuery.parseJSON(data);
        alert($this.html()); //B
        if (!obj.error) {
            $this.html("Watching");                
        } else {
            alert("Failed to set item for watching");                   
        }
    };
    alert($this.html()); //A
    setWishList($(this).attr("iid"), callback, this);
});

Answer 2

解决方案是更改点击处理程序：

$(".wish-clicked").click(function(e){
    var self = $(this);
    // ...
    alert(self.html());
    setWishList(self.attr("iid"), callback, self);
}

顺便说一句：你总是可以在流程的每个状态下执行console.log(this)来调查你正在处理的对象。使用F12（Windows）或Cmd+Alt+I（Mac）在Chrome / Firefox / IE中打开控制台

jquery ajax $（this）对象从.html（）返回null

2 个答案: