Element.observe('click', ...) automatically fires?

[[e-mail]]

Hi all,

I have a map made of 4 img elements that I want to conditionally add mouse click listeners to. The map, and all this functionality is loaded up through an Ajax.Updater, which is called by a mouse click event. So you basically click a link which calls the updater that loads the map, and the updater has an onComplete method attached to it that adds the listeners to the map elements or changes the image accordingly.

The problem I'm running into is that as I add my onclick listener to the map elements in the Ajax.Updater's onComplete method, the listener is automatically being called, which isn't what I want. It's like the listener is grabbing the original click event that called the Ajax.Updater. I can't figure out how to get this behavior to stop. I've added an event.stop() method in the listener on the link that sets the whole mess up.

Anyway, here's my code: The whole thing is kicked off with this complete function, which is called from a simple text link on the page:

function complete(e){ // THIS METHOD IS CALLED FROM AN OBSERVER ON A TEXT LINK
	e.stop(); // PREVENT THE CLICK FROM BUBBLING
	new Ajax.Updater('content', map_uri, {onComplete: start_map});
}

The map file is just a <div><div><img><img></div><div><img><img></div></div> structure to lay out the images of the map.

function start_map(){
        var levels = ['boss', 'monkey', 'secret', 'gifty'];
	levels.each(function(level){
		if (!level_data[level].complete) $(level + "_map").observe('click', put_content(level));
	});
}

Again, as soon as I add this observer to these img elements the put_content method is called for each of the observers. What I want to happen is for those img's to listen for any future mouse clicks, and it seems like they're all responding to the mouse click that set up the map in the 1st place. Can any one let me know what I'm doing wrong? Any help is greatly appreciated.

[[e-mail]]

Oh, by the way, I'm using the Prototype Javascript framework.

[Airshow]

Dan,

I'm sure it's not the whole answer but you could try:

function start_map(){
        var levels = ['boss', 'monkey', 'secret', 'gifty'];
	levels.each(function(level){
		if (!level_data[level].complete) $(level + "_map").observe('click', function(){put_content(level)});
	});
}

Remember that when specifying a function as an event handler, it will (normally) be either be a function name or an anonymous function.

A function call (such as put_content(level) without the anonomous function wrapper) will cause put_content's returned value to be specified which is generally not what you want, though it CAN be correct - namely when the called function returns a function (typically when you need to programmatically select one from several available functions, or if a function needs somehow to be composed on the fly - which is quite advanced).

In your first code block, the problem is most likely not in what you have posted but in the xxx.observe(....) statement that specifies complete() as an event handler.

Airshow