How to call function while click <a> that inside the infoBubble content? - google-maps-api-3

Question

I am a new beginner try to add a google map in my website, and there have some problems.
I am trying to add some markers with the infobubble in the google map, then i want to add inside the infobubble content, after click on the , a function will be call, but infobubble seems different with infowindow, i have try to search many methods and still can't do this.
Here is my example:
function createMarker(point, locations, map) {
var content = '<a id="test" href="#">Deatils Information</a>';
var infoBubble = new InfoBubble({
minWidth: 300,
minHeight: 150,
padding: 15,
hideCloseButton: true,
borderRadius: 0,
content: content
});
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infoBubble.open(map, marker);
});
};
I have search and find many examples,
$("#test").live("click", function(){
alert("clicked");
});
this function is only work inside the infowindow.
and
$(infoBubble.bubble_).live("click", function() {
alert('clicked!');
});
this function do not have any response,
if there any methods can do this function? Or somethings i should be read if i want to solve this problems? Please give me some hints. Thank you very much!!

Answer 1

Your problem is the HTML "string" in the infobubble is not part of the DOM until after the infobubble is created and rendered.
This should work:
function testClick() {
alert("clicked!");
}
and in your infowindow/infobubble:
var content = '<a id="test" href="javascript:testClick();">Deatils Information</a>';