Question

这是我第一次尝试使用jQuery插件，我已经成功地将一些东西拼凑起来了。我有一个按钮，按下后，通过ajax发送ID以删除图像。我的问题是，当ajax调用返回时，我在Firebug控制台窗口中收到以下错误：

TypeError: self.releaseCropBoxIfSet is not a function

以下是我的插件的精简版：

if( typeof Object.create !== 'function' ){
    Object.create = function( obj ){
        function F() {};
        F.prototype = obj;
        return new F();
    };
}

(function( $, window, document, undefined ) {
    var uploadCrop = {
        init: function (options, elem ){
            var self = this;
            self.elem = elem;
            self.$elem = $( elem );
            self.options = $.extend( {}, $.fn.uploadCropPlugin.options, options);
            self.deleteUploadedImageButton = $('#'+self.options.deleteUploadedImageButton);
            self.ajaxurl = self.options.ajaxurl;
            self.deleteUploadedImageButton.on('click', function(e) {
                $(this).hide();
                $.ajax({
                    url: self.ajaxurl,
                    type: 'post',
                    success: self.deleteSuccess,
                    error: self.deleteError,
                    data: {
                        IDtoDelete : IDtoDelete,                
                        action : 'deleteImage'
                    }
                });
            });
        },
        deleteSuccess: function(data) {
            var self = this;
            var returnedData = $.parseJSON(data);  
            self.releaseCropBoxIfSet(); // I am getting an error here
        },
        releaseCropBoxIfSet: function() {
            var self = this;
            // REMOVE OLD JCROP
            if (typeof self.jcrop_api != "undefined") {
                self.jcrop_api.release();
                self.jcrop_api.destroy();
            }
        }
    };
    $.fn.uploadCropPlugin = function( options ) {
        return this.each(function() {
            var thisUploadCropObj = Object.create( uploadCrop );
            thisUploadCropObj.init( options, this );
        });
    };
    $.fn.uploadCropPlugin.options = {
        // my vars here
    };
})( jQuery, window, document );

我想知道在Ajax调用期间问题是否self丢失了。所以我尝试将self作为变量发送到函数，然后返回它，但我得到了错误。我也尝试将self.位置于函数调用的前面，但它仍然不起作用。

Answer 1

要重新考虑您遇到的问题：

TypeError: self.releaseCropBoxIfSet is not a function

以上意味着releaseCropBoxIfSet的{{1}}属性不是函数。如果你确定你正确地定义了这个函数（你是哪个），问题必然是self不是你想象的那样（也就是说，它不是你想要它的对象）。要解决此问题，您可以bind将self值设置为您希望（期望）的值。

this

您可能希望对(function ($, window, document, undefined) { var uploadCrop = { init: function (options, elem){ // ... self.deleteUploadedImageButton.on('click', function(e) { $(this).hide(); $.ajax({ url: self.ajaxurl, type: 'post', // Notice the call to `bind` success: self.deleteSuccess.bind(self), error: self.deleteError, data: { IDtoDelete : IDtoDelete, action : 'deleteImage' } }); }); }, deleteSuccess: function(data) { var self = this; var returnedData = $.parseJSON(data); self.releaseCropBoxIfSet(); } }; })(jQuery, window, document);回调执行相同的操作。

（另外，如果deleteError，请不要将this设为self。这不必要且令人困惑。）

如何在Ajax调用后引用jQuery插件实例（调用插件函数）

1 个答案: