JQuery detect anchor click within an ID

Hi I want to use JQuery to detect when a link below is clicked.

<ul id="mapoutput">
	<li>
		<a href="#">street=Mathew+Avesuburb=Jewellsstate=NSWpostcode=2280</a>
	</li>
	<li>
		<a href="#">street=Mathew+Stsuburb=Kincumberstate=NSWpostcode=2251</a>
	</li>
	<li>
		<a href="#">street=Mathew+Crescentsuburb=Youngstate=NSWpostcode=2594</a>
	</li>
</ul>

I have been trying the below and similar variations, but having no success.

$("#mapoutput a").click(function () {
		//map.setCenter(new GLatLng(coordinates[0][0],coordinates[0][1]));
		
		alert ("hi");
		return false;
	});

What syntax should I use? Is it necessary to loop like below?

$("a").each(function()
{
	$(this).click(function()
	{
		alert ("hi");
		return false;
	});
});

Once I have detected which link has been clicked it should pass the co-ordinates to a script.

How should I pass them? The only way i can think of it do have hidden fields whose value I pick out with javascript.

Your first code sample should work fine. If it doesn’t, my guess is that you’re executing that code before the dom elements exist. Browsers parse and process the web page from top to bottom.

might wanna look at the jquery ready() method if you aren’t familiar with it already.

The first snippet works fine if executed after the dom is fully loaded. You have a street address in your links so I’m not sure how this gets translated into coordinates. I would just parse the text string and do what you need to do.


	$(document).ready(function(){
		$("#mapoutput a").click(function () {
			alert(this.text);
			return false;
		});				
	})

Thanks for your help.

I have the Jquery code in the on ready state.

I have figured out part of the problem now. It’s that the below doesn’t exist when the page loads.

<ul id="mapoutput">
	<li>
		<a href="#">street=Mathew+Avesuburb=Jewellsstate=NSWpostcode=2280</a>
	</li>
	<li>
		<a href="#">street=Mathew+Stsuburb=Kincumberstate=NSWpostcode=2251</a>
	</li>
	<li>
		<a href="#">street=Mathew+Crescentsuburb=Youngstate=NSWpostcode=2594</a>
	</li>
</ul>

When the page loads there is only:

<ul id="mapoutput">	
												
											</ul>

The <li> and <a> parts are put in by ajax after the user interacts with a search box.

When I hard code it so that it’s there on page loads, the jquery works.

I have tried to add

$("#mapoutput a").click(function () {
					//map.setCenter(new GLatLng(coordinates[0][0],coordinates[0][1]));
					
						alert ("hi");
						return false;
					});
					

In the ajax response script, but it doesn’t like me adding event listeners there???

I would imagine that the onload is still the place for this code?

Otherwise where should it be?

Should I put dummy anchors into the ul?

Since the links aren’t there when the document.ready is executed, the events are not binded to the anchor links. This will bind to the objects dynamically as they come in.

		$(document).ready(function(){
		        $("#mapoutput a").live('click',function () {
		            alert(this.text);
		            return false;
		        });         
		})