0

これは私のコードです：

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

ドキュメントの準備が整うと、「クリック」が発生します。そして、ハンドラーが呼び出されます。

なぜこの振る舞い？そして、どうすればそれを修正できますか？

4

1 に答える 1

2

クリックハンドラーは、のリンクに接続されていませんInfoWindow。.on（）clickを使用して委任する必要があります。

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

編集：ianpgallによって提案されたように変更documentされました#mappa-eventi

jsfiddle

于 2012-06-07T13:47:43.463 に答える