爲什麼我無法處理這個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