jquery - 单击div下面的图像

I have a plugin which creates a lens over an image. But cannot make the image clickable when underneath the lens

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

I created this on jsfiddle to help illustrate the problem http://jsfiddle.net/F9GT5/2/

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

I need to be able to make the image clickable to then perform a set of actions.

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

I have seen it done on some sites such as this here http://www.starplugins.com/cloudzoom

我已经在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;
    });

This problem has been driving me nuts for a couple of days now, with the cloudzoom plugin, it seems like they are clicking through the lens to the image below. But as shown in the code above, the click even is bound to the image, but when you inspect element, you get the lens over the top of the image

这个问题让我疯狂了几天,使用cloudzoom插件,看起来他们正在点击镜头到下面的图片。但是如上面的代码所示,点击甚至绑定到图像,但是当你检查元素时,你会将镜头放在图像的顶部

Has anyone any ideas on how to tackle this problem?

有没有人有任何关于如何解决这个问题的想法?

2 个解决方案

#1

Using your plugin, store the selector for the image in the div somehow:

使用你的插件,以某种方式存储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');
   });

#2

I'm not sure if I understood your problem, but I think that what you want is to add the "click" event to your "lens" div:

我不确定我是否理解你的问题,但我认为你想要的是将“点击”事件添加到你的“镜头”div中:

$(".lens").click(function(){
alert("click lens");    
});

#1