jquery - Openseadragon: Make overlay clickable

Question

In my project,i am using deep zoom image,for that i am using openseadragon. I want to make an overlay above my Image and make it clickable (click to redirect to different html page).
I use following code:

    <script type="text/javascript">
        OpenSeadragon({
            id:            "example-zoomit-tilesource",
            prefixUrl:     "openseadragon/images/",
            tileSources:   [{ 
                Image:  {
                    xmlns: "http://schemas.microsoft.com/deepzoom/2009",
                    Url: "http://cache.zoom.it/content/WwI0_files/",
                    TileSize: "254", 
                    Overlap: "1", 
                    Format: "jpg", 
                    ServerFormat: "Default",
                    Size: { 
                        Width: "5816",
                        Height: "3961"
                    }
                }
            }],
            overlays: [{
        id: 'example-overlay',
        px: 0, 
        py: 0, 
        width: 200, 
        height: 200,
        className: 'highlight'

   }]

   });
    </script>

i got overlay,but couldn't this overlay clickable.On the action of click i want to go to new html page.can any one help me.?

Answer 1

尝试这个，

                jQuery(function() {
                    setTimeout(bindtooltip, 2000);
                });

                function bindtooltip(){              
                    jQuery("#example-overlay").click(function(e){
                       alert('clicked');
                    });
                };

Answer 2

尝试使用open处理程序

var viewer = OpenSeadragon(); //pass your options here
viewer.addHandler("open", function(){
    jQuery("#example-overlay").click(function(e){
        alert('clicked');
    });
});