I am trying to add a series of links to a div and then an a click event to the links. If I append outside of the the .each() iteration the link is matched by the click event handler. However, links created within the loop are not matched by the click event handler. My code is :
$("#col1").append("<a href='6'>link</a><br/>"); // links added in this way are matched ok $.ajax({ type: "GET", url:"/catalog/category_all/", dataType: "xml", success: function(xml) { // format and output result $(xml).find('object').each(function(){ $("#col1").append("<a href='" + $(this).attr('pk')+ "'>"+ $ (this).find('field').text() + "</a><br/>"); // links added in this way do not match }); } }); $("#col1 a").click(function(){ var href = $(this).attr('href'); alert(href); $.ajax({ type: "GET", url:"/catalog/category_sub/" + href , dataType: "xml", success: function(xml2) { $(xml2).find('object').each(function(){ $("#col2").append("<a href='" + $(this).attr('pk')+ ">"+ $ (this).find('field').text() + "</a><br/>"); }); //close each } }); // stop normal link click return false; }); Can anybody suggest what I might be doing wrong?