Jquery 插件和 $.ajax

Question

我正在尝试编写一个基于原型模式的 jQuery 插件。

我的问题是，当我使用 $.ajax 函数加载 xml 文件时，我丢失了 this 对象。

例如这项工作：

Plugin.prototype = {        
        defaults: {
            message: 'Hello world!'             
        },
        init: function() {              
            this.setStyleAndOptions();
            return this;
        },
        setStyleAndOptions: function() {                
            alert("setStyleAndOptions : ");
        }
}

但事实并非如此，我收到一条错误消息“this.setStyleAndOptions 未定义”：

Plugin.prototype = {

        defaults: {
            message: 'Hello world!'
        },
        init: function() {              
            $.ajax({
                type: "GET",
                url: "param.xml",
                dataType: "xml",
                success: this.initOptions
            });                             
            return this;
        },          
        initOptions: function(dataxml) {        
            // Error occured here, I suppose "this" is not the plugin anymore
            this.setStyleAndOptions();
        },
        setStyleAndOptions: function() {                
            alert("setStyleAndOptions");
        }
}

感谢您的帮助。

Answer 1

尝试将 this 存储在变量中：

        init: function() {
            var that = this;          
            $.ajax({
                type: "GET",
                url: "param.xml",
                dataType: "xml",
                success: that.initOptions
            });                             
            return that;
        },          

Answer 2

问题是 this 是错误发生时的函数。您可以使用 apply 或 call 函数尝试：

Plugin.prototype = {

    defaults: {
        message: 'Hello world!'
    },
    init: function() {              
        $.ajax({
            type: "GET",
            url: "param.xml",
            dataType: "xml",
            success: function(){
                this.initOptions.apply(this, arguments);
            }
        });                             
        return this;
    },          
    initOptions: function(dataxml) {
        this.setStyleAndOptions();
    },
    setStyleAndOptions: function() {                
        alert("setStyleAndOptions");
    }
}