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

虽然前一种方式运作得很好，但后者却没有。是否可以通过这种方式处理自定义jQuery事件，使用“on”？

Answer 1

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

<强>事件

所有小部件都有与其各种行为相关联的事件，以便在状态发生变化时通知您。对于大多数小部件，当触发事件时，名称以小部件名称为前缀并以小写为前缀。例如，我们可以绑定到进度条的change事件，只要值发生变化就会触发该事件。

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

每个事件都有一个相应的回调，它作为一个选项公开。如果我们愿意，我们可以加入进度条的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')。

如何正确触发jQuery UI自定义事件？

1 个答案: