jquery – 将事件处理程序附加到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 = "<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],function(){ 
                    alert("hi"); 
                }); 
            });
            bubble.open(map,marker); 
        }     
    });
}

解决方法

您正在尝试在元素上添加“click”事件,而不是DOM元素. $(‘.bubble-details-button’)不是DOM元素(它是DOM元素的包装),但$(‘.bubble-details-button’)[0]是.

另一方面,当您尝试添加“click”事件时,尚未创建内容.只有在已经创建内容的元素时,您才能使用内容的元素(例如添加事件). InfoBubble将触发“domready”事件,当它的内容被创建时.所以你需要处理它：

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

原文地址：https://www.jb51.cc/jquery/181400.html