Repeating a Click Event in jQuery Without Removing The Previous Click Effect

Question

$(document).ready(function() {
		  $('img').click(function(e) {
			    var offset = $(this).offset();
			    /*alert("X: " + (e.pageX - offset.left) + " / Y: " + (e.pageY - offset.top));*/
			    $(this).after('<h3 class="label">Label</h3>');

			    $('.label').offset({ top: e.pageY - offset.top, left: e.pageX - offset.left });

		  });
		});

.label {
	position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

	<img src="http://mdikici.com/wp-content/uploads/2014/12/living-room-underlay-glossy-laminate-flooring-with-grey-microfiber-sleeper-sofa-and-nice-indoor-fireplace-in-amazing-minimalist-living-room-design-trendy-minimalist-living-room-design-ideas.jpg" alt="Living Room" title="Living Room" usemap="#tagarea" />

</body>

Thanks for helping me out.

Let me clarify what I am trying to achieve, I have an image of a living room with various objects (TV, Sofa, etc) and when I click on say the TV area I want to add a Image Label right next to it, now I have achieved this part but when I click again on any other area say if I clicked on the Sofa then the Image Label disappears from the TV area and shows near the Sofa area, so basically I want this functionality to loop and should be able to add multiple Image Labels.

Please check the script and kindly let me know how to fix it.

$(document).ready(function() {
      $('img').click(function(e) {
            var offset = $(this).offset();
            $(this).after('<img src="images/badge.png" alt="Badge" title="Badge" class="label" />');

            $('.label').offset({ top: e.pageY - offset.top, left: e.pageX - offset.left });

      });
    });

    <body><img src="images/living-room-1.jpg" alt="Living Room" title="Living Room" /></body>

Thanks

Rory McCrossan · Accepted Answer · 2015-07-11 15:42:28Z

1

The issue is because although you append a new img, your selector of .label is changing the position of all img elements - even those previously added. You need to amend your code to relate to only the new img element being added. Try this:

$('img').click(function(e) {
    var offset = $(this).offset();
    $('<img src="images/badge.png" alt="Badge" title="Badge" class="label" />')
        .insertAfter(this)
        .offset({ 
            top: e.pageY - offset.top, 
            left: e.pageX - offset.left 
        });
  });

UPDATE

Given your updated HTML example and requirements, this should work for you:

$('img').click(function (e) {
    var offset = $(this).offset();
    $('<h3 class="label">Label</h3>')
        .insertAfter(this)
        .css({
            top: e.pageY - offset.top,
            left: e.pageX - offset.left
        });
});

Example fiddle

edited Jul 11, 2015 at 15:42

answered Jul 11, 2015 at 15:18

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Raj Over a year ago

Hi Rory, That code for some reason removes the Living Room image, so it's not working for me. And if I replace (in my original code) the click event to add a <h3> element instead of the image element I still have the same issue.

Rory McCrossan Over a year ago

In that case can you please add your full HTML and JS code to your question, as it's hard to diagnose the exact issue without seeing the full problem.

Raj Over a year ago

The body element only has the living room image, I have added the body area code in the question now.

Rory McCrossan Over a year ago

It could be an issue with using offset. Try setting the labels to position: absolute in CSS, and then setting their top and left positions. Here's a working example: jsfiddle.net/qhjyjtvw/2

Rory McCrossan Over a year ago

Here's another example using your image and the h3 element: jsfiddle.net/qhjyjtvw/3

|

Collectives™ on Stack Overflow

Repeating a Click Event in jQuery Without Removing The Previous Click Effect

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related