jquery - 单击 div 下方的图像

Question

我有一个插件，可以在图像上创建镜头，但无法使图像在镜头下方可点击。

我在 jsfiddle 上创建了这个来帮助说明问题: http://jsfiddle.net/F9GT5/2/

我需要能够使图像可点击，然后执行一组操作。

我在一些网站上看到过这样的做法:http://www.starplugins.com/cloudzoom

 $('#myCloudZoom').bind('click',function(){       // Bind a click event to a Cloud Zoom instance.
        var cloudZoom = $(this).data('CloudZoom');   // On click, get the Cloud Zoom object,
        cloudZoom.closeZoom();                       // Close the zoom window (from 2.1 rev 1211291557)
        $.fancybox.open(cloudZoom.getGalleryList()); // and pass Cloud Zoom's image list to Fancy Box.
        return false;
    });

这个问题已经让我抓狂了好几天了，使用 cloudzoom 插件，看起来他们正在通过镜头点击到下图。但如上面的代码所示，点击事件甚至绑定(bind)到图像，但是当您检查元素时，您会将镜头置于图像的顶部。

有人对如何解决这个问题有任何想法吗？

Answer 1

使用您的插件，以某种方式将图像的选择器存储在 div 中:

//Inside the plugin, creating the lens; add attribute for image
$("<div>").data('image', this)
//Then bind a click event to the div to trigger a click on the image:
   .click(function () {
      $(this).data('image').trigger('click');
   });