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

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中的链接。您必须将click委托给.on()。

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

编辑：改变document到#mappa-eventi由ianpgall

jsfiddle