Question

My code :

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<div id="map" style="width:500px; height:500px"></div>

<div id="mappa-infowindow" style="display:none;">
    <div style="background-color:#ffffff;">            
        <span style="cursor:pointer;" class="pulsanteProva">Click</span>
    </div>            
</div>

jQuery/Maps

$("body").on("click", ".pulsanteProva", function () {
    alert("clicked");
});

$(window).load(function () {
    var templateFinestra = $('#mappa-infowindow');
    var infoWindowOptions = {
        content: templateFinestra.html(),
        pixelOffset: new google.maps.Size(-87, -88)
    };
    var infowindow = new InfoBox(infoWindowOptions);    

    var latlng = new google.maps.LatLng(42.745334,12.738430);
    var options = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Example' });   
    
    markerClick = function () {
        infowindow.setContent(templateFinestra.html());
        infowindow.open(map, marker);
    };    
    
    google.maps.event.addListener(marker, 'click', markerClick);
});

when I click on the marker, than on the span Click, it must show to me the alert, but in fact it doesnt works. Seems that the handler is not attached? Why?

Neither putting the on inside the function and attach it from the map parent works http://jsfiddle.net/arEWv/9/

Answer 1

Seems like google map remove all events attached to embedded elements before rendering.

See that working jsfiddle

markerClick = function () {
        infowindow.setContent(templateFinestra.html());
        infowindow.open(map, marker);
        setTimeout(function(){$('.pulsanteProva').click(function(){alert('clicked');});},500);
    };   

And this one not working jsfiddle

markerClick = function () {
        infowindow.setContent(templateFinestra.html());
        infowindow.open(map, marker);
       $('.pulsanteProva').click(function(){alert('clicked');});
};