AddEventlistener to dom element such as span?

[THE_AI]

Hey guys!
I thought that this is going to be a really easy task, but for some
reason it is not...

I have this code here:
for(i = 0; i < hotspotsPlaces.length; i++) {
var hotspot = hotspotsPlaces[i];
var marker = createMarker(hotspot);
var refInfoWindow = createInfoWindow(marker, hotspot);

google.maps.event.addListener(marker, 'click', refInfoWindow);

marker.setMap(map);
bounds.extend(marker.position);
markers.push(marker);
}

once you click the marker, the infowindow opens:
function createInfoWindow(marker, hotspot) {
return (function() {
infowindow.setOptions({
'content': hotspot.description,
'position': hotspot.position
});
infowindow.open(map,marker);

google.maps.event.addDomListener(document.getElementById('direction'),'click',
function(){
alert('clicked!');
});
}
);
}

The infowindow content always contain a <span id="direction"></span>
and I want to dynamically attach a Listener for click on it. (it
should act like a button).

if I print document.getElementById('direction') to the console I get
the appropriate span shown. But no click event is attached to it.
I also don't see any error in the console so I'm really confused to
why it is not working.

I've tried to add an event to the direction span with mootools, plain
js, google.maps.event and nothing is working and I just can't
understand why???

Can someone tell me what did I do wrong???
Thank you in advance!

[Rossko]

> I've tried to add an event to the direction span with mootools, plain
> js, google.maps.event and nothing is working and I just can't
> understand why???

The infowindow content doesn't exist in the DOM until the API has
created it, asynchronously.
Try listening for the infowindow's domready event before attempting to
access its content.

[THE_AI]

Hey Rossko!
Thank you very much, you are genius!
I've changed to:

function createInfoWindow(marker, hotspot) {
return (function() {
infowindow.setOptions({
'content': hotspot.description,
'position': hotspot.position
});
infowindow.open(map,marker);

google.maps.event.addListener(infowindow, 'domready', function() {
$('direction').addEvent('click', function(){

alert('clicked!');
});
});
}

);
}

and it seems to work now.

[THE_AI]

Ok, so my happiness was way too short.

The above code works for 1 marker and 1 infowindow.
But if you have 50 markers and you start to click around, then the
clicked! alert is displayed as many time as you've clicked on a
marker...

is there any way to reset the event before I set the content in my
closure function???

Doing all this with inline js would be really easy - I could just make
a <a href="#" onlcick="javascript:blabla()">blabla</a>
and it would work as expected, but I think that doing this with
unobtrusive javascript is somehow more elegant...

[Rossko]

> The above code works for 1 marker and 1 infowindow.
> But if you have 50 markers and you start to click around, then the
> clicked! alert is displayed as many time as you've clicked on a
> marker...

Yup.
You could remember you've created a listener and not create another.
You could look into addListenerOnce

> Doing all this with inline js would be really easy - I could just make
> a <a href="#" onlcick="javascript:blabla()">blabla</a>

Yup.

[THE_AI]

Thank you! I was making some stupid things like removing all events
from the element, but this is much nicer!
google.maps.event.addListenerOnce(infowindow, 'domready', function() {
// this event is added with mootools

$('direction').addEvent('click', function(){

$('hotspots-direction-from').setStyle('display', 'block');
});
});