Question

This is my code :

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<div id="mappa-eventi" style="width:500px; height:500px;"></div>

<div id="mappa-infowindow" style="display:none;">
    <div class="mappa-infobox" style="background-color:#ffffff; width:300px; height:100px;">
        <a class="punto-leggi" href="javascript:void(0);">Link</a>
    </div>
</div>

jQuery/JS :

var map;
var location = new google.maps.LatLng(45.930976, 10.639744);

$(".punto-leggi").click(function (e) {
    e.preventDefault();
    alert("Clicked");
});

$(document).ready(function () {
    var mapOptions = {
        mapTypeControl: false,
        panControl: false,
        zoom: 8,
        center: location,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mappa-eventi"), mapOptions);

    var marker = new google.maps.Marker({
        position: location,
        map: map                
    });

    var infowindow = new google.maps.InfoWindow({
        content: $('#mappa-infowindow').html()
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });  
});

I click on the marker! Than, clicking on “LINK”, it should show to me the alert. In fact it doesnt works. But, if I add this :

$(".punto-leggi").click();

at the end of document ready, it gets the “click”. And the handler is called.

Why this behaviour? And how can I fix it?

Answer 1

The click-handler isn’t attached to the link in the InfoWindow. You will have to delegate the click with .on().

$(function() {
    // ...
    $("#mappa-eventi").on("click", ".punto-leggi", function(ev) {
        ev.preventDefault();
        alert("foo");
    });
});

Edit: Changed document to #mappa-eventi as suggested by ianpgall

jsfiddle