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

Question

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

使用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 = "<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);        
}