[jQuery] binding click event using .each()

[jQuery] binding click event using .each()


I'm having some trouble understanding if I am using .each() to
correctly bind a function to the click event of multiple links.
I have a photo gallery consisting of a handful of images enclosed the
a div and some controls:
<div class="img">
...
<img src="foo.jpg" />
...
<a class="delPhoto" id="8">Delete</a> <!-- The number in the id attr
is the photo_id from the db -->
</div>
I am trying to create an AJAX delete function which at it's most basic
looks like this:
$(document).ready(function(){
$("a.delPhoto").each(function(index){
$(this).click(function(){
var photo_id = $(this).attr("id");
$.post("delete_photo.php", {photo_id: id})
})
})
})
The issue I'm haing, is that if I have 10 images on the page, and I
click on one of the delete links, I can see in Firebug that it seems
to pickup the photo_id correctly (eg. the 8 in the example above), but
it triggers the $.post once for every one of the 10 a.delPhoto links
on the page (each using the same photo_id value).
What am I doing wrong here?
Thanks
Scott