jquery.fileupload-image-editor.js

jquery.fileupload-image-editor.js中

  _initEventHandlers: function () {
            this._super();

            var handlers = {};
            handlers[this.options.uploadImageEditorPreviewSelector] = this._previewHandler.bind(this);

            this._on(this.options.filesContainer, handlers);
        },

jquery.ui.widget.js

    _on: function( suppressDisabledCheck, element, handlers ) {
        var delegateElement,
            instance = this;

        // no suppressDisabledCheck flag, shuffle arguments
        if ( typeof suppressDisabledCheck !== "boolean" ) {
            handlers = element;
            element = suppressDisabledCheck;
            suppressDisabledCheck = false;
        }

        // no element argument, shuffle and use this.element
        if ( !handlers ) {
            handlers = element;
            element = this.element;
            delegateElement = this.widget();
        } else {
            element = delegateElement = $( element );
            this.bindings = this.bindings.add( element );
        }

遇到错误

是因为找不到

uploadTemplateId: 'template-upload',

Uncaught TypeError: Cannot read property 'innerHTML' of null
at Function.tmpl.load (tmpl.js:38)

tmpl.load = function (id) {
return document.getElementById(id).innerHTML
}

at tmpl (tmpl.js:21)

var tmpl = function (str, data) {
var f = !/[^\w\-.:]/.test(str)
? (tmpl.cache[str] = tmpl.cache[str] || tmpl(tmpl.load(str)))
: new Function( // eslint-disable-line no-new-func
tmpl.arg + ',tmpl',
'var _e=tmpl.encode' +
tmpl.helper +
",_s='" +
str.replace(tmpl.regexp, tmpl.func) +
"';return _s;"
)
return data
? f(data, tmpl)
: function (data) {
return f(data, tmpl)
}
}

at $.<computed>.<computed>._initTemplates (jquery.fileupload-ui.js:657)

_initTemplates: function () {
var options = this.options;
options.templatesContainer = this.document[0].createElement(
options.filesContainer.prop('nodeName')
);
if (tmpl) {
if (options.uploadTemplateId) {
options.uploadTemplate = tmpl(options.uploadTemplateId);
}
if (options.downloadTemplateId) {
options.downloadTemplate = tmpl(options.downloadTemplateId);
}
}
}

at $.<computed>.<computed>._initTemplates (jquery.ui.widget.js:127)
at $.<computed>.<computed>._initSpecialOptions (jquery.fileupload-ui.js:677)

_initSpecialOptions: function () {
this._super();
this._initFilesContainer();
this._initTemplates();
},

at $.<computed>.<computed>._initSpecialOptions (jquery.ui.widget.js:127)
at $.<computed>.<computed>._create (jquery.fileupload.js:1381)

_create: function () {
this._initDataAttributes();
this._initSpecialOptions();
this._slots = [];
this._sequence = this._getXHRPromise(true);
this._sending = this._active = 0;
this._initProgressObject(this);
this._initEventHandlers();
},

at $.<computed>.<computed>._create (jquery.ui.widget.js:127)
at $.<computed>.<computed>._super (jquery.ui.widget.js:114)
at $.<computed>.<computed>._create (jquery.fileupload-process.js:167)

_create: function () {
this._super();
this._processing = 0;
this._processingQueue = $.Deferred().resolveWith(this)
.promise();
}

扩展阅读

https://api.jqueryui.com/jQuery.widget/#method-_on

_on( [suppressDisabledCheck ] [, element ], handlers )Returns: jQuery (plugin only)

Binds event handlers to the specified element(s). Delegation is supported via selectors inside the event names, e.g., "click .foo". The _on() method provides several benefits of direct event binding:

• Maintains proper this context inside the handlers.
• Automatically handles disabled widgets: If the widget is disabled or the event occurs on an element with the ui-state-disabled class, the event handler is not invoked. Can be overridden with the suppressDisabledCheck parameter.
• Event handlers are automatically namespaced and cleaned up on destroy.

• suppressDisabledCheck (default: false)
  Type: Boolean
  Whether or not to bypass the disabled check.
• element
  Type: jQuery
  Which element(s) to bind the event handlers to. If no element is provided, this.element is used for non-delegated events and the widget element is used for delegated events.
• handlers
  Type: Object
  An object in which the keys represent the event type and optional selector for delegation, and the values represent a handler function to be called for the event.

Code examples:

Prevent the default action of all links clicked within the widget's element.

this._on( this.element, {
  "click a": function( event ) {
    event.preventDefault();
  }
});

https://www.runoob.com/jquery/traversing-closest.html

定义和用法

closest() 方法返回被选元素的第一个祖先元素。

祖先是父、祖父、曾祖父，依此类推。

DOM 树：该方法从当前元素向上遍历，直至文档根元素的所有路径（<html>），来查找 DOM 元素的第一个祖先元素。

该方法与 parents() 类似，都是向上遍历 DOM 树，不同点是：

closest()

• 从当前元素开始
• 沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先
• 返回包含零个或一个元素的 jQuery 对象

parents()

• 从父元素开始
• 沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
• 返回包含零个、一个或多个元素的 jQuery 对象