How do I bind a click event to created dom elements in a jQuery $.each loop? only seems to be binding to the last element!

Question

Consider the following code, in theory the click event should bind to each element but for some reason (unbeknown to me) it will only bind to the last link. does anyone have any ideas?

$.each(data, function(i,aitem){ 
linkid = 'address'+i;     
$("#SearchResults").html($("#SearchResults").html()+'<p><a id="'+linkid+'" href="#">'+ aitem.Address +'</a></p>');       
$('#'+linkid).bind("click", function(){
 otherfunction(i);
 return false;
});

});

Answer 1

What about adding a live click-event?

$("a[id^=address]").live("click", function() {
    alert("ran");
    var value = $(this).attr("id").substr(7);
    myFunction(value);
    return false;
});

should add a click event to all those links (:

edit: Included tip from darin...

Answer 2

this is a common problem with people who are new to closures.

the correct solution would be to do this:

$.each(data, function(i,aitem){ 

  linkid = 'address'+i;                                   
  $("#SearchResults").html($("#SearchResults").html()+'<p><a id="'+linkid+'" href="#">'+   aitem.Address +'</a></p>');                                        
  $('#'+linkid).bind("click", function(){
     (function(i){
        otherfunction(i);
        return false;
     }(i));
  });


});

Answer 3

try:

var linkid = ...;
var link = $("<a></a>").attr('id', linkid).attr('href', '#').text(aItem.Address).click(function(){ alert('ran'); return false; });


$('#SearchResults').append(link.wrap("<p></p>"));

The idea being that you want to bind your click event to each link that you are creating, so just chain it to the end of your creation code, and be explicit about it.

Hope that helps.