附加事件处理元素中谷歌地图信息泡沫(Attach event handler to element

我有一个关于谷歌地图和事件处理/听的问题。

使用jQuery和谷歌地图V3，我能够把地图标记，并且当用户点击该标记打开一个infobubble事件侦听器。 我今天准备这样做（但至今一直没能找出）是添加其他事件处理程序的信息提示的内容。 例如，如果在地图上标记用户点击打开的信息提示（这部分作品），然后如果他们点击的东西里面infobubble做别的事情。 我在下面贴上我的代码，在此先感谢您的帮助

function addMarker(data) {
    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
    var title = data.title? data.title: "";
    var icon = $('#siteUrl').val() + 'img/locate.png';

var bubbleContentString = "<span class=\"bubble-details-button\">Get Details about " + title+ "</span>";

myInfoBubble = new InfoBubble({
    content: bubbleContentString,
    hideCloseButton: true,        
    backgroundColor: '#004475',
    borderColor: '#004475'
});

var myMarker =  new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: title,
        icon: icon
    });    
addListenerToMarker(myMarker, myInfoBubble);
markerSet.push(myMarker, myInfoBubble);    
}
function addListenerToMarker(marker, bubble){
    console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
    google.maps.event.addListener(marker, 'click', function() { 
        if (!bubble.isOpen()) {  
            google.maps.event.addListenerOnce(bubble, 'domready', function(){ 
                console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
                google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ 
                    alert("hi"); 
                }); 
            });
            bubble.open(map, marker); 
        }     
    });
}  

Answer 1:

您尝试添加"click"事件元素，这是不是在DOM Element 。 $('.bubble-details-button')是不DOM Element （它是一个包装DOM Element ），但$('.bubble-details-button')[0]是。

在另一方面，当你尝试添加"click"事件，内容尚未创建。 你可以工作（如添加事件）与内容的元素，只有当已创建它们。 该InfoBubble将触发"domready"事件，当它的内容将是created.So你需要处理：

 if (!bubble.isOpen()) {
    google.maps.event.addListenerOnce(bubble, 'domready', function(){
        google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){
            alert("hi");
        });
    });
    bubble.open(map, mymarker);        
}

Answer 2:

在我必须做你所描述的情景，我有一个JavaScript函数调用直接在InfoBubble内容。 我常常包括InfoBubble内的超链接，所以在这种情况下，我做到以下几点：1 - 写一个JavaScript函数来处理一个超链接点击。 2 - 创建标记。 3 - 将一个click事件处理程序打开一个InfoBubble标记。 4 - 定义InfoBubble的内容，以便JavaScript中的InfoBubble内容直接嵌入设置通过调用在第1步中定义的JavaScript函数来处理click事件 - 喜欢的事：

"<span>" +
     "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
      displayTextContent + "</a>" +
"</span>"

文章来源: Attach event handler to element inside google maps info bubble