How to hook a click event to a dynamically created anchor tag using jQuery - dynamic

Question

Inside a jQuery loop, I'm trying to attach a click event to a dynamically created anchor tag which is contained in an LI element. The LI itself is dynamically created inside a static UL element. For some reason nothing gets fired when the anchor is clicked. Here is a simplified version of the problematic code:
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
console.info("Anchor clicked!");
event.preventDefault();
return false;
}).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});
where visiblecities is the id of the UL element and cities is a collection on which the loop iterates.
Any idea why the click event is not working?

Answer 1

Use event delegation to set up a single event handler that will react to all <a> elements, even if they're added after the code executes:
$('#visibleCities').on('click', 'a', function(event) {
console.info('Anchor clicked!');
event.preventDefault();
return false;
});
Though, as gdoron mentioned in the comments, your <a> elements don't currently have any content so they won't actually be clickable.

Answer 2

use .on.
$('a').on('click',function(){
//code here
});
Try
$('li a').on('click',function()
{
//code here
});
$.each($.MyProject.cities, function (index, city)
{
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});

Answer 3

use live method instead of click
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
});