Question

So I am writing some jquery that is basically meant to resize any image when I click on it, meaning I can click on one image and resize it, and then click on any other image and start resizing it as well, but idependently. The code I have to do this is as follows:

$('img').click(function(e) {
  thisImage = this;
  $(document).keypress(function(event) {
    if ( event.which == 115) {
      $(thisImage).css('width', "+=25").css('height', "+=25");
    };

    if ( event.which == 97) {
      $(thisImage).css('width', "-=25").css('height', "-=25");
    };
  });
});

This works fine the first time you use it. You can click on an image when there is more than one image present and the image that you clicked on will resize appropriately when you hit the appropriate buttons. Upon clicking the second image to resize it, however, both it and the first image you clicked will start resizing together. This scales with as many images as you can put on the page, i.e., three images will resize together after each has been clicked on.

Does anyone know why this is happening and how I can stop it? I would like to be able to click each image and be able to resize it independently, no matter the order it was clicked on. I have a feeling this has something to do with the way I am using “this,” but I am relatively new to jquery and javascript so I cannot think what it would be.

Any help would be appreciated. Thanks!

-Alex

Answer 1

Essentially the issue here is that each time you click an image, you are binding a new listener to the document.

This means that every time you press a key, you invoke all of the listeners that you have added. What you would want to do is unbind the listeners that are still on the document when you click the next image, which will mean that only one image will be listening for your keypresses at a time.

For example, in this jsfiddle we have the code:

 $('#in').keypress(function(event) { alert('first'+event.which); });
//$('input').unbind('keypress');
$('#in').keypress(function(event) { alert('second'+event.which); });

Which adds two listeners to an input element, and as you can see by pressing a key within the element, it causes both listeners to run. Essentially you are adding a new keypress listener each time you click an image, and the old ones are never being cleared out. If you uncomment the unbinding command in the jsfiddle, you will see that only the second alert will be invoked, because the first listener is released. If you only ever want the keys to be listening to one image at a time, then you will want to have something along the lines of $(document).unbind('keypress') at the beginning of the click listener (of course this will clear all keypresses, so if you have other listeners attached to the document you will want to be a bit more careful managing them, for this problem it will be sufficient).