Как связать событие click с динамически созданным тегом привязки с помощью jQuery

Question

Внутри цикла jQuery я пытаюсь привязать событие click к динамически созданному тегу привязки, который содержится в элементе LI. Сам LI динамически создается внутри статического элемента UL. По какой-то причине ничто не срабатывает при нажатии на якорь. Вот упрощенная версия проблемного кода:

$.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")); 
}); 

, где visiblecities является идентификатор элемента UL и городов представляет собой коллекцию, на которой итерации цикла.

Любая идея, почему событие click не работает?

Answer 1

Используйте event delegation, чтобы создать один обработчик событий, который будет реагировать на все <a> элементы, даже если они добавлены после код выполняет:

$('#visibleCities').on('click', 'a', function(event) { 
    console.info('Anchor clicked!'); 
    event.preventDefault(); 
    return false; 
}); 

Хотя, как отметил gdoron в комментариях, ваши элементы <a> не являются текущими иметь любой контент, чтобы на самом деле он не был доступен для кликов.

Answer 2

использование живой метод вместо нажмите

$.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")); 
    }); 

Answer 3

использование .on.

$('a').on('click',function(){ 
    //code here 
}); 

Попробуйте

$('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")); 
});