Removing an Image from Canvas on Double Click

Question

I'm Dragging and Drooping an image from a toolbar onto a canvas and then moving it around in the canvas.Currently I'm able to load a single image onto a canvas multiple times from the toolbar as shown in the link below.

http://jsfiddle.net/gkefk/22/

I want to add the functionality of deleting a particular copy of the image from the canvas when the user double clicks on that particular image.For this I'm triggering a jQuery event on double click.

$("#image").dblclick(function(){
layer.remove();
});

Even though I'm double clicking on a particular copy the image,that particular copy is not getting deleted from the canvas.I can't understand what I'm doing wrong..Please Help

The link to the fiddle containing the jQuery event

http://jsfiddle.net/gkefk/23/

Answer 1

Updated your fiddle to make it work:

image.on('dblclick', function() {
    image.remove();
    layer.draw();
});

http://jsfiddle.net/gkefk/26/

You have to add an event handler to each copy of the image instead of trusting in jQuery to dynamically do this.

Your jQuery call is done once on document load (while no element with id "image" exists) and has no effect afterwards. Also keep in mind that it's not a good idea to work with a static ID on multiple dynamic elements as an ID has to be unique.