Assigning behavior to Fine-Uploader generated thumbs

Question

I think I have almost the same problem as described here : fine-uploader generate more unique custom file ids But I can't figure out a solution that fit my needs.

I have a modal window containing 2 tabs. Each tab contains a FineUploader instance. That works pretty well. BUT I want to assign a behavior to each file added (for exemple, assign an "onclick" behavior to a generated thumb). To do this, I do something like this :

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

And the scope.thumbloaded function do this :

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

The problem is that FU creates DOM elements with formatted ids, like qq-file-id-XXX. So, when I add several files in one of each FU instance I have (in each of my tabs, remember?), FU creates two DOM elements with same ids. And the "click" event is added twice on elements with same ids.

Do you see the problem??

I wasn't able to find a solution yet.

Any help?

thanks.

Answer 1

Ok, I finally find out a workaround, based on jquery's selector. Very easy though. I just apply a certain class to each of element I just took care of. Though, I don't hook new event listener to elements that already have it.

The code will speak for itself:

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