Question

I have an image with a click event bound to it which grows/shrinks the image. I am using jQuery to place a magnifying glass in the top corner of the image. The problem is that clicking on the magnifying glass doesn’t trigger the image’s grow/shrink. Is there a jQuery way to pass the click on to the underlying element or to have the image subscribe to the magnifying glass’s click event?

I know that I can put a click handler on the magnifying glass and have it trigger the image’s click event, but I want to know if there is another, better way of doing this.

In response to comments my general HTML is:

<div style="position: relative">
   <img src="growme.jpg" />
   <img src="magnify.jpg" style="position: absolute; top: 0;" />
</div>

and Pseudo-code for jQuery

$(growme).load(
   $(growme).parent().append($(magnify));
   $(growme).click(...);
)

Answer 1

So sorted this one out on my own. I can use jQuery’s .live() which will automatically bind events when elements are added. So I just call in my (document).ready and every time a magnifying glass is added I can have it click the previous element (my image) for me.

jQuery(".magnify").live("click", function() {
     jQuery(this).prev().click();
});