How to check if the same image or another image or something other than the image is clicked

Question

I am making a sortable and resizable image album. In there, I am trying to add a feature to create the image as a link.

1. Image is clicked

2. Then wrap that image with a div which displays an edit button on top of that image.

3. And when the edit button is clicked a dialog box will appear to enter the url and name for that image.
4. And then wrap the image with an a tag with the given url and name.

Demo at jsfiddle

This is ok. But what I would like to do is:

• If same image is clicked don't wrap the edit div again.
• Only if a new image is clicked wrap the edit div.
• And if something other than the image is clicked remove the edit div.

How can I achieve this? I think unwrap() will the trick to remove the edit div from the image but how will I know if it is the same image, or something other than that?

js snippet:

$('#sortable li img').on("click", function () {
    $image = $(this);
    image_resize($image);
    edit_image($image);
});

function edit_image(image) {
    image.wrap('<div id="edit-image"></div>');
    $('#edit-image').prepend('<a href="#">EDIT</a>');
    $("#edit-image a").center(true).css("cursor", "pointer").css("z-index", "1");
    $('#edit-image a').on("click", function () {
        alert("clicked on edit");
        if (image.parent().is("a")) {
            var img_link = image.parent().attr("href");
            var img_name = image.parent().attr("alt");
            $('#image_link_dialog #input #link').val(img_link);
            $('#image_link_dialog #input #name').val(img_name);
        }
        $('#image_link_dialog').css("display", "block").css("z-index", "2");
        $('#image_link_dialog').center(false);
        $('#image_link_dialog').draggable();
    });
    $('#image_link_dialog .dialog_handle a').on("click", function () {
        if (!$('#image_link_dialog #input #name').val() == '') {
            var img_name = $('#image_link_dialog #input #name').val();
            console.log('img_name: ' + img_name);
        }
        if (!$('#image_link_dialog #input #link').val() == '') {
            var img_link = $('#image_link_dialog #input #link').val();
            console.log('img_link: ' + img_link);
            if (img_name) {
                if (image.parent().is("a")) {
                    image.parent().attr("alt", img_name);
                    image.parent().attr("href", img_link);
                } else {
                    image.wrap(function () {
                        return "<a class='img_a' href='" + img_link + "' alt='" + img_name + "'></a>";
                    });
                }
            } else {
                if (image.parent().is("a")) {
                    image.parent().attr("href", img_link);
                } else {
                    image.wrap(function () {
                        return "<a class='img_a' href='" + img_link + "'></a>";
                    })
                }

            }
        } else {
            alert('please enter link url');
        }
        $('#image_link_dialog #input #link').val('');
        $('#image_link_dialog #input #name').val('');
        $('#image_link_dialog').css("display", "none");
    })
}

Answer 1

To avoid adding multiple wrappers you can do something like this:

$('li.ui-sortable-handle').click(function(){
     $('li.ui-sortable-handle').removeClass('edit-image'); //remove previously selected images
     $(this).addClass('edit-image');
});

And to do editing :

$('body').on('click','.edit-image', function(){
    //do whatever you want. the click event is as example edit and it to any event that suits you
});

To remove edit flag if something else is clicked:

$('body').on('click','*',function(e){
    if(!$(this).hasClass('.ui-sortable-handle') $('li.ui-sortable-handle').removeClass('edit-image');
e.stopPropagation();
});

of course I suggest adding another class other than ui-sortable-handle to you lis and use them in the above code as there might be other elements with class 'ui-sortable-handle' in your page.

Answer 2

I have edited your fiddle to demonstrate a possible solution: jsfiddle

To check wether a image is currently edited i add a class. This later helps me to identify the currently edited image. I added alerts to show when you have to stop the edit mode.

The following snippet allows you to catch the event of clicking anything but an image.

$(document).on("click", function (event) {
     alert('stop edit for current image'); 
});

Adding event.stopPropagation() to the onCLick of the images stops the $(document).on("click",... from capturing this click as well.