Mouseover events and node cloning, event propagation
Here is the sceneraio:
I have an image upload utility that uploads images to a profile. In the utility, the images show up in a 1xn matrix. The images will be displayed on the profile page in the order that they appear in the utility. On each image, I have buttons that allow you to move the image up in the order, down, to the top or to the bottom. Those buttons sit on a div that overlays the images; each image gets its own set. I want those buttons to be invisible until you mouseover the image, then disappear when you leave.
The problem that I'm having is that if I attach an event listener directly to the images, when I move their order, a clone is made and the original is removed. This causes the images to loose their listeners.
My intuition is to solve this problem by assigning the listener to a container div, allowing the events to bubble up. Does anyone have any advise on how to set this up? When I listen for events on the mouse I get LOTS of fires, and I'm not sure how to sort them out to accomplish my goal.
Any help would be great!