Question

I am using the Google API V3 Infobox.js plugin to display custom info windows.

My problem is that the infobox.js code hides each marker info window and uses a z-index to bring them to the front.

Is it possible to trigger a click event when the parent div is being hidden in this way?

Here is an example of Infobox.js:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html

If you look at the code in Firebug, you will see that the divs for the InfoBox are ghosted out.

For example here is the InfoBox that is ghosted out in Firebug HTML code view:

<div style="border: 1px solid black; margin-top: 8px; background: none repeat scroll 0% 0% yellow; padding: 5px;">
City Hall, Sechelt    <br>    British Columbia    <br>    Canada
</div>

Now, imagine a button link inside of the InfoBox with the class “.infobox-link” that opens up a modal

On document ready I call:

 $("#my-body-id").on("click", ".infobox-link", function(event){
    var linkalt = $(this).attr("alt");
    openModal(linkalt);             
    return false;
});

I bind it in this way because the markers, the infobox, and the map itself are all dynamic and do not exist initially. So, I am binding a click to the body using on(). However, the click event is never triggering because the element in the DOM is hidden due to the Infobox.js.

The div SHOULD be visible, but it is not. The console says the visibility is visible, but the trigger event is not firiing.

Do I need to modify the Infobox.js or can I work around it using JQ?

How can I trigger this click?

Answer 1

OK, I found the culprit.

enableEventPropagation: true

The infoBox kills bubbles (default: false), so all of my events were not triggering.