javascript - 为什么我不能处理这个信息窗口的内容？

Question

这是我的代码：

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);
    });  
});

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

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

在文档准备就绪时，它会获得“点击”。并调用处理程序。

为什么会有这种行为？我该如何解决？

Answer 1

点击处理程序未附加到InfoWindow. 您将不得不委托clickwith .on()。

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

编辑：更改document为#mappa-eventiianpgall 建议的

jsfiddle