Question

我正在编写我的第一个jQuery插件并遇到了问题;

以下是我使用的（简化）代码（插件结构基于this boilerplate template）：

;(function ( $, window, document, undefined ) {

    var pluginName = "myplugin";
    var settingsDefaults = {
        example: "value"
    };

    function Plugin(element, settingsCustom) {
        this.element = $(element);
        this.settings = $.extend({}, settingsDefaults, settingsCustom);
        this._defaults = settingsDefaults;
        this._name = pluginName;
        this.init();
    }

    $.extend(Plugin.prototype, {

        init: function() {
            $.getJSON('/ajax/mydata.json', this.theCallback);
        },

        theCallback: function(data) {
            // do something with data

            // call next task
            theNextMethod();
        },

        theNextMethod: function() {
            alert('Next Method Called');
        }

    });

    $.fn[pluginName] = function (options) {
        this.each(function() {
            if(!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
        return this;
    };

})(jQuery, window, document);

在元素上调用插件时调用init方法，并调用获取某些JSON的AJAX请求，在插件中注册另一个方法作为回调theCallback。这被称为罚款。在该方法中，然后我尝试在插件中调用另一个方法（轻松地称为theNextMethod），但是它失败了，我在控制台中收到以下错误：

TypeError：＆＃39; undefined＆＃39;不是一个函数（评估＆＃39; theNextMethod（）＆＃39;）

我知道这与使用this的范围有关，但我不确定如何解决它。非常感谢任何帮助。

Answer 1

您必须使用正确的命名空间

调用该方法

$.extend(Plugin.prototype, {

        init: function() {
            $.getJSON('/ajax/mydata.json', this.theCallback.bind(this));
        },
        theCallback: function(data) {
            this.theNextMethod();
        },

        theNextMethod: function() {
            alert('Next Method Called');
        }

});

注意它如何将this的值绑定到回调函数，将其设置为对象，而不是默认情况下this回调内的$.getJSON的XHR对象。

jQuery AJAX回调方法无法访问另一个插件方法

1 个答案: