如何正確觸發jQuery UI自定義事件？

Question

我正在構建用於研究目的的文件上傳器插件，並且正在努力嘗試使回調以我想要的方式工作。 簡而言之，此小部件在類型為file的輸入字段上運行。 一些代碼可以更好地解釋：

$.widget('ultimatum.uploadify', {
  create: function() {
    // Irrelevant code here
  },

  _onChange: function(event) {
    // Private function that is fired when an "change" event
    // is triggered by the input.
    var files = event.target.files;
    var fileInfo = {};

    // When the file processing finish, I want to trigger this custom event:
    this._trigger("fileready", null, fileInfo);
  }
});

好的，這樣，我可以像這樣處理回調：

$('#upload-files').uploadify({
  fileready: function(event, file) {
    // My code here 
  }
});

問題是我想像這樣處理此事件：

$('#upload-files').uploadify();
$('.upload-files').on('fileready', function(event, file) {
  // My code here.
});

盡管前一種方法效果很好，但后一種效果卻很差。 是否可以使用“ on”以這種方式處理自定義jQuery事件？

Answer 1

來自http://api.jqueryui.com/jQuery.widget/

大事記

所有小部件都具有與其各種行為相關聯的事件，以便在狀態更改時通知您。 對於大多數窗口小部件，在觸發事件時，名稱將以窗口小部件名稱開頭並小寫。 例如，我們可以綁定到progressbar的change事件，該事件在值更改時觸發。

$( "#elem" ).bind( "progressbarchange", function() {`
  alert( "The value has changed!" );
});

每個事件都有一個相應的回調，作為選項公開。 如果需要，我們可以掛鈎到progressbar的change回調中，而不是綁定到progressbarchange事件。

$( "#elem" ).progressbar({
  change: function() {
    alert( "The value has changed!" );
  }
});

所有小部件都有一個create事件，該事件在實例化時觸發。

因此，對於您的小部件，它看起來像：

$('#upload-files').uploadify();
$('#upload-files').on('uploadifyfileready', function(event, file) {
  // My code here.
});

正如我在評論中提到的，我認為$('.upload-files')可能是一個錯字，而正確的選擇器是$('#upload-files') 。