为什么我无法处理这个信息的内容？

Question

这是我的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);
    });  
});

我点击标记！点击“LINK”，它应该向我显示警报。事实上它不起作用。但是，如果我加上这个：

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

在文档结束时，它会获得“点击”。并且处理程序被调用。

为什么会这样？我该如何解决？

Answer 1

点击处理程序未附加到InfoWindow中的链接。您必须使用.on()委派click。

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

修改：按照ianpgall

的建议将document更改为#mappa-eventi

jsfiddle