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

Question

这是我第一次尝试jQuery插件，并且我已经设法凑齐了几乎可以工作的东西。我有一个按钮，一旦按下，通过ajax发送一个ID以删除图像。我的问题是，当AJAX调用返回，我在我的萤火虫控制台窗口中收到以下错误：

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 

意味着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，这是不必要的，混乱的。）