Click Event Registered with jQuery Live in Google Map InfoWindow

StackOverflow https://stackoverflow.com/questions/3570683

Question

I was using the technique described here Click event in Google Map InfoWindow not caught to dynamically add click event handlers to some of the content added to the Google Map InfoWindow. Works great except in IE.

I have content with normal anchor tags and those links work just fine.

I have an anchor tag with a jQuery (live) click handler read the id to trigger some other action and it does nothing in IE. Chrome/FF etc work just fine. I've tried using a div and span with no change to the behavior.

Any ideas?

Edit: This is with Google Maps v2 (I do know it is deprecated) and doesn't work in IE 7 or 8. Haven't bothered with IE6 on this project.

Edit: Here is a some sample code that repos the behavior.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
#gmap{ height:450px;width:350px; }
</style>

<script type="text/javascript">
    var gmap;
    var sampleLatLon = new GLatLng(37.4419, -122.1419);
    var sampleIcon = new GIcon(G_DEFAULT_ICON);

    $(document).ready(function () {

        // Google maps setup
        $(window).unload(function () { GUnload(); });
        var gmap = new GMap2(document.getElementById("gmap"));
        gmap.setCenter(sampleLatLon, 13);
        gmap.setUIToDefault();

        // Marker and InfoWindow setup
        var marker = new GMarker(sampleLatLon, { icon: sampleIcon });
        var infoWindowMarkup = '<a id="infowindow-1" class="clickeventvialive">click me</a>';
        marker.bindInfoWindowHtml(infoWindowMarkup);
        gmap.addOverlay(marker);

        $('.clickeventvialive').live('click', function () {
            alert('Are you Internet Exploder??');
        });
    });
</script>

</head>
<body>
    <div id="gmap"></div>
</body>
</html>
Was it helpful?

Solution

There are two ways of solving that one with jquery another using old skool javascript onclick.

In the jQuery method binding the event AFTER the info window is shown and the element created seems to solve the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
        </script>
        <style type="text/css">
            #gmap {
                height: 450px;
                width: 350px;
            }


        </style>
        <script type="text/javascript">
            var gmap;
            var sampleLatLon = new GLatLng(37.4419, -122.1419);
            var sampleIcon = new GIcon(G_DEFAULT_ICON);

            $(document).ready(function(){

                // Google maps setup
                $(window).unload(function(){
                    GUnload();
                });
                var gmap = new GMap2(document.getElementById("gmap"));
                gmap.setCenter(sampleLatLon, 13);
                gmap.setUIToDefault();

                // Marker and InfoWindow setup
                var marker = new GMarker(sampleLatLon, {
                    icon: sampleIcon
                });

                //marker.bindInfoWindowHtml(infoWindowMarkup);

                GEvent.addListener(marker, "click", function(){
                    var infoWindowMarkup = '<div class="container"><a id="infowindow-1" class="clickeventvialive">click me</a></div>';
                    gmap.openInfoWindowHtml(sampleLatLon, infoWindowMarkup, {
                        "onOpenFn": function(){
                         $(".clickeventvialive").bind("click", function (){alert("hello")});
                        }
                    });

                });



                gmap.addOverlay(marker);

            });
        </script>
    </head>
    <body>
        <div id="gmap">
        </div>
    </body>
</html>

or the old skool method where you can simply add onclick handler to to your link HTML:

var infoWindowMarkup = '<a id="infowindow-1" onclick=alert("Old Skool") class="clickeventvialive">click me</a>';
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top