jquery - jQuery 插件中的 "Undefined is not a function"

Question

我正在尝试用 jQuery 编写一个插件，但在这部分我得到了“未定义不是函数”:

(function($) {
    $.fn.build = function(options){
        var settings = $.extend({
            x: 0,
            y: 0,
            type: 0
        }, options);

        $.post("/build", { x: settings.x, y: settings.y, type: settings.type}, function(data) {
            // Return JSON array
            if(data['doBuild'] == 'true') {
                this.append("<div class='item' style='left:"+settings.x+"px; top:"+settings.y+"px;'></div>"); // ERROR ON THIS LINE
            }
        },'json');  

        return this;
    };
}(jQuery));

我认为这与“this”语句有关，但我不明白这个错误。为什么不起作用？

Answer 1

此引用 the jqXHR object在 $.post 的回调中。看起来您只需要保存对外部 this 的引用:

    var that = this;
    $.post("/build", { x: settings.x, y: settings.y, type: settings.type}, function(data) {
        // Return JSON array
        if(data['doBuild'] == 'true') {
            that.append("<div class='item' style='left:"+settings.x+"px; top:"+settings.y+"px;'></div>");
        }
    },'json'); 

或者您可以使用$.proxy :

    $.post("/build", { x: settings.x, y: settings.y, type: settings.type}, $.proxy(function(data) {
        // Return JSON array
        if(data['doBuild'] == 'true') {
            this.append("<div class='item' style='left:"+settings.x+"px; top:"+settings.y+"px;'></div>");
        }
    }, this),'json');