javascript - 如何在 Ajax 调用后引用 jQuery 插件实例(调用插件函数)

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 );

我想知道问题是否是 self 在 Ajax 调用期间丢失。因此，我尝试将 self 作为变量发送给函数，然后返回它，但这样我遇到了错误。我还尝试将 self. 位保留在函数调用的前面，但它仍然不起作用。

Answer 1

要重新表述您遇到的问题:

TypeError: self.releaseCropBoxIfSet is not a function

上面的意思是self的releaseCropBoxIfSet属性不是一个函数。如果您确定您正确地定义了该函数(确实如此)，那么问题一定是 self 不是您所认为的那样(也就是说，它不是您想要的对象) )。要解决此问题，您可以 bind 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，请不要将 this 别名为 self。这是不必要且令人困惑的。)