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

Question

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

使用jQuery和谷歌地图v3，我可以放置地图标记和事件侦听器，当用户单击标记时打开一个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 - 将点击事件处理程序附加到打开InfoBubble的标记。 4 - 定义InfoBubble的内容，以便JavaScript中的InfoBubble内容直接嵌入设置通过调用在第1步中定义的JavaScript函数处理click事件 - 是这样的：

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