将事件处理程序附加到google maps info bubble中的元素

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

使用jQuery和谷歌地图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 = "Get Details about " + title+ ""; 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"事件，当它的内容被创建时。所以你需要处理它：

  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

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

 "" + "" + displayTextContent + "" + ""