Question

I need to know when the Map Data link is clicked (see image 1, bottom right corner).
When the Map Data window is opened, it is hidden by the overlaying elements (image 2). So I have to hide them when I receive the trigger of opening the window, and to redisplay them when it is closed.

I’ve tried to catch all click events under the map canvas as below, but I’m not triggered when I click on “Map Data”

$("googleMapCanvas a").click(function() {
        alert("link under map clicked");
        });

Any ideas?

Image 1

Image 2

Update

Here is my functionnal code after Christian’s answer

<div id="googleMapCanvas">
</div>

<div id="currentLocationBubbleContainer">
    ... 
</div>

<script>
$("#googleMapCanvas").on('click', 'a', function(event) {

     var host = event.target.host;      
     var isGoogleExternalLink = false;

     if (host != null && host.search(".google.") != -1 ){
             isGoogleExternalLink = true;
     }

     //It's not enough to check the innerHTML because it's content varies 
     //depending on the device langage, so in stead I check if it is not 
     //a click on the google logo, or on the terms of use which are external links
     if (event.target.innerHTML == "Map Data" || ! isGoogleExternalLink ){
             hideCurrentLocationBubble();
     }
     });

     //Close button of Map Data window
     $("#googleMapCanvas").on('click', 'img', function(event) {

         if (event.target.src == "https://maps.gstatic.com/mapfiles/transparent.png"){
             showCurrentLocationBubble();
         }
     });
</script>

Answer 1

Where are you binding that .click() event? By default that won’t be delegated, so if the map doesn’t exist at the time of calling the code, that event won’t be bound. Try using .on() instead:

$("googleMapCanvas").on('click', 'a', function() {
    alert("link under map clicked");
});