Using addEventListener To Handle jQuery Click Events On Selectors Inside Google Maps infoWindow With jQuery UI Maps -

the problem: when trying fire jquery events on selectors within google maps infowindow, click event listener required catch events within gmap object must parent other click functions, resulting in failure click events fire on first click.

all solutions found here on stackoverflow showed how add eventlistener, still did not account failure fire on first click issue.

the solution below work if using jquery ui maps populate clickable markers open infowindows, , want able target elements inside infowindow jquery events on main (parent) page.

this solution solves typical first fire issue resulting nested click functions, jquery events not fire on first click, since functions must within addeventlistener $('map_canvas').gmap() in order caught - then, of course, nested within click function , therefore wouldn't fire until second time clicked.

there surely more standard and/or eloquent ways of achieving this, aside requiring non-typical syntax, solves issues , makes quick, straightforward, workable solution otherwise frustrating problem, saving 8+ hours of wall head bashing took me produce.

the solution:

use click event listener on $('#map_canvas').gmap() catch-all, mainevent function allows determine class name(s) of object clicked, , use if statements see if matches of 'selectors' wish use within infowindow , perform regular functions there on out.

for convenience, jquery(element) assigned equivalent normal jquery(this)

classes split array account multiple classes on clicked object.

then use if statement check if class wish use selector in array of class names object clicked, and, if so, put in our usual jquery have otherwise put inside nested click function selector, substituting (element) (this) necessary.

this adapted use id selector instead of classes - change $(element).attr('class') $(element).attr('id')

here sample code:

jquery('#map_canvas').gmap().addeventlistener('click', function(mainevent) {      // cannot directly target elements inside google map , infowindows jquery, here catch clicks on map , use if statements see if clicked element matches of selectors wish use.      var element = jquery(mainevent.target);     if ( $(element).attr('class') ) { var maineventclasslist = $(element).attr('class').split(' '); }      // gets classes of clicked element array, can check matches if statements, equivalent typical jquery class selectors.  have made (element) available replacement (this).        if ( jquery.inarray( 'selectorclassname', maineventclasslist ) >= 0 ) {          mainevent.preventdefault();         mainevent.stoppropagation();         var destinationid = jquery(element).attr('href');         alert(destinationid);      }   });