Jquery - 不是一个函数问题

Question

>我正在使用Jquery

https://code.jquery.com/jquery-1.12.2.min.js

然后我包含我的函数文件，它有这个函数

;(function($){  
    $.fn.UPLOAD_IMAGES= function(options) {
        var defaults = { 
            main_url: mainurl
        };
        var options = $.extend(defaults, options);
        // returns the jQuery object to allow for chainability.  
        return this;  
    }
})(jQuery);

然后我在点击事件时调用它，例如

/*Image upload*/
    var options_img = {
    type: '',
    id: $('#id').val(),
    controller: 'listings'
};
$("#file_upload").UPLOAD_IMAGES(options_img);

它给了我TypeError

UPLOAD_IMAGES is not a function

我不知道我错过了什么？

Answer 1

查看此演示，一切按预期工作

var mainurl = 'someUrl';  // <== define mainurl
jQuery.fn.extend({
  UPLOAD_IMAGES: function(options) {
    alert('UPLOAD_IMAGES called') // <== remove later
    var defaults = {
      main_url: mainurl
    };
    var options = jQuery.extend(defaults, options);
    // returns the jQuery object to allow for chainability.  
    return this;
  }
});
var options_img = {
  type: '',
  id: $('#id').val(),
  controller: 'listings'
};
$("#file_upload")
  .UPLOAD_IMAGES(options_img)
  .addClass('sample'); // <== chain call

.sample { /* demo to show chainability*/
  background-color: red;
  transition: all 1s ease;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_upload">
  chainable UPLOAD_IMAGES
</div>