This has nothing to do with .each. You've propably just missed how the
selectors and binding work, or how the ajax works.
What your script does currently:
1) You create a link and append it to #col1
2) You send an ajax-request (Which is asynchronous, meaning that the
script keeps running and does not wait for the response)
3) You tell jQuery to find all links within col1 (it finds only one,
the one you did in step 1) and bind a click handler to them
4) Your ajax-request finishes and the callback function fires,
creating more links inside #col1
You never bind any events to the links created in the ajax functions
callback.
There are several ways to make this work, the best solution depends on
your JS and HTML structure and so on. I'd recommend them in this
order:
A) You could attach the event handler to #col1 instead of the links
within it. Then you would have to do it only once, and it would keep
working when you add links inside it through ajax or otherwise. This
is called event bubbling or event delegation. The click handler would
just need to check if the clicked element (available through
event.target) was a link:
$('#col1').click(function(e){
if($(e.target).is('a'))
{
// Your code here
}
});
B) You could use the popular liveQuery plugin which takes care of this
rather automatically, although I've heard rumors of decreased
performance with it (propably not an issue unless the DOM get rather
large)
C) You could run the binding again in the callback function after it
has created the links (I wouldn't usually recommend this, it can get
tedious)
