将行为分配给 Fine-Uploader 生成的拇指

Question

我想我遇到的问题与此处描述的几乎相同：fine-uploader generate more unique custom file ids 但是我找不到适合我需要的解决方案。

我有一个包含 2 个选项卡的模态 window。每个选项卡都包含一个 FineUploader 实例。这很好用。但我想为每个添加的文件分配一个行为（例如，为生成的缩略图分配一个 "onclick" 行为）。为此，我做了这样的事情：

 callbacks: {
     onComplete: function(id, name, response) {
       scope.thumbloaded({
         id: id,
         name: name,
         uuid: response.uuid
       });
     },

scope.thumbloaded 函数执行此操作：

function thumbloaded(id, name, uuid) {
  $('#qq-file-id-' + id).on('click', function(e) {
    e.stopPropagation(); // avoid the entire thumbnail to catch the event
    doSomething();
  });
}

问题是 FU 创建了 DOM 个带有格式化 ID 的元素，例如 qq-file-id-XXX。因此，当我在我拥有的每个 FU 实例之一中添加多个文件时（在我的每个选项卡中，还记得吗？），FU 会创建两个具有相同 ID 的 DOM 元素。 "click" 事件在具有相同 ID 的元素上添加了两次。

你看到问题了吗？

我还没有找到解决办法。

有什么帮助吗？

谢谢。

Answer 1

好的，基于 jquery 的选择器，我终于找到了解决方法。不过很容易。我只是将某个 class 应用于我刚刚处理的每个元素。不过，我不会将新的事件侦听器挂接到已有的元素上。

代码不言自明：

function thumbloaded(id, name, uuid) {
  var newThumb = $('.qq-file-id-' + id + ':not(.aw-thumbnail)');
  newThumb.prop('id', uuid);
  $('#' + uuid).on('click', function(e) {
    doSomething();
  });
  $('#' + uuid).addClass('aw-thumbnail');
}

将行为分配给 Fine-Uploader 生成的拇指

Assigning behavior to Fine-Uploader generated thumbs

fine-uploader