Question

How it works:
I’m trying to create an instant upload function with Jquery/Ajax. When a user double-clicks an image, a Fancybox shows up with the upload field. After choosing an image, the image is uploaded and the source of the clicked image is changed immediately.

The problem:
When having multiple images on one page, sometimes another image gets replaced by the new image (randomly).

The code:

function uploader(thumb) {
new AjaxUpload('imageUpload', {
    action: 'uploader.php',
    name: 'file',
    onComplete: function(file, response) {
        thumb.attr('src', response);
        $.fancybox.close();
    }
});
}

$("img").dblclick(function(){
    var img = $(this);
    $.fancybox({
        href: '#imageUpload',
        overlayShow: true
    });
    uploader(img);
    return false;
});

What I’ve tried:
When I alert the ID of the image that should be replaced, it always alerts the correct ID of the image. And still it replaces another image instead.

Regards,
Bo

Answer 1

The way you’re getting a reference to the clicked image is not good. You should extract the clicked element from the event object passed to the handler.

$('img').dblclick(function(event) {
   var img = $(event.target);
   ...
});