将事件处理程序附加到谷歌地图信息气泡内的元素

Question

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

使用 jQuery 和 google maps v3，我可以放置一个地图标记和一个事件侦听器，当用户单击标记时会打开一个信息气泡。我想做的（但到目前为止还没有弄清楚）是将另一个事件处理程序添加到信息气泡的内容中。例如，如果用户单击地图标记打开信息气泡（该部分有效），然后如果他们单击信息气泡内的某些内容，则执行其他操作。我已经在下面粘贴了我的代码，提前感谢您的帮助

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

在我必须执行您所描述的操作的情况下，我会在 InfoBubble 内容中直接包含一个 JavaScript 函数调用。我经常在 InfoBubble 中包含超链接，所以在这种情况下，我会执行以下操作： 1 - 编写一个 JavaScript 函数来处理超链接点击。 2 - 创建标记。 3 - 将单击事件处理程序附加到打开 InfoBubble 的标记。 4 - 定义 InfoBubble 的内容，以便将直接嵌入在 InfoBubble 内容中的 JavaScript 设置为通过调用在步骤 #1 中定义的 JavaScript 函数来处理点击事件 - 类似于：

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

Answer 2

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

另一方面，当您尝试添加"click" 事件时，尚未创建内容。您可以使用内容的元素（例如添加事件），只有当它们已经创建时。 InfoBubble 将触发"domready" 事件，当它的内容将被创建。所以你需要处理它：

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