Attach event handler to element inside google maps info bubble

Question

I have a question regarding google maps and event handling/listening. Using jQuery and google maps v3, I am able to place a map marker and an event listener that opens an infobubble when the user clicks on the marker. What I'd like to do (but so far haven't been able to figure out) is add another event handler to the contents of the info bubble. For example, if the user clicks on the map marker open the info bubble (that part works), and then if they click on something inside the infobubble do something else. I have pasted my code below, thanks in advance for any help ``` 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: '…

Accepted Answer

You are trying to add `"click"` event on element ,which is not `DOM Element`. `$('.bubble-details-button')` is not `DOM Element` (it is a wrapper of `DOM Element`), but `$('.bubble-details-button')[0]` is.

On the other hand, when you are trying to add `"click"` event, the content is not created yet. You can work(e.g. add events) with content's elements ,only when they are already created. The `InfoBubble` will trigger `"domready"` event, when its content will be created.So you need to handle it:

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

Attach event handler to element inside google maps info bubble

Solution

Problem