Jquery - mousedown function with multiple class elements

Question

Hi all,

Im super new to Jquery so this may be a quick one. I have a mousedown function on a class named "thumb_resize". I have multiple divs named thumb_resize. So, the first time the mousedown function gets called it works perfectly, but it breaks when I try to call it from another element.

Maybe its easier if I show you:

http://www.barrylachapelle.com/stuff/new_site/drag_test2.html

If you grab an arrow on one of the thumbnails and drag it, itll blow the image up. If you let go it animates back to its original position. Great, happy with that. But if you try it a second time on another thumbnail it animates the first as well.

Any ideas?

Cheers all.

Answer 1

This is because you're attaching an event handler to document on each mousedown, here:

$(document).mousemove(...);

This is fine, but you need to .unbind() it in your mouseup event:

$(this).mouseup(function(){
  $(document).unbind('mousemove');
  mouse_down = false;
  $('.thumb').animate( { height: 115 }, 100);
  $('.thumb').animate( { width: 200 }, 100);
});

Here's a demo with only that change so you can see it working :)